/* ============================================
   Trading Card Game - Main Stylesheet
   LAMP Stack Implementation
   ============================================ */

/* ============================================
   CSS Variables & Theme
   ============================================ */
:root {
    /* Colors */
    --color-bg: #0a0a0f;
    --color-bg-secondary: #12121a;
    --color-bg-card: #1a1a24;
    --color-text: #e5e5e5;
    --color-text-muted: #888;
    --color-border: #2a2a3a;
    --color-accent: #6366f1;
    --color-accent-hover: #818cf8;

    /* Rarity Colors */
    --rarity-common: #9CA3AF;
    --rarity-uncommon: #10B981;
    --rarity-rare: #3B82F6;
    --rarity-epic: #8B5CF6;
    --rarity-legendary: #F59E0B;
    --rarity-mythic: #EC4899;
    --rarity-demonic: #8B0000;
    --rarity-holy: #FFD700;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);

    /* Pack Sizing Standard */
    --pack-width: 280px;
    --pack-aspect: 3 / 4.1;
    --pull-width: 280px;
    --pull-aspect: 3 / 4;
    --pack-radius: 12px;
    --pack-modal-width: 320px;
    --pack-confirm-width: 120px;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ============================================
   Background Layers
   ============================================ */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.background-texture {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    opacity: 1;
    animation: background-pulse 20s ease-in-out infinite;
}

@keyframes background-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.background-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
        linear-gradient(
            180deg,
            rgba(8, 8, 12, 0.95) 0%,
            rgba(10, 10, 15, 0.98) 50%,
            rgba(12, 12, 18, 1) 100%
        );
}

/* ============================================
   Header
   ============================================ */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-xl);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    animation: pulse 2s ease-in-out infinite;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-link {
    font-weight: 500;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
    color: var(--color-accent);
    background: rgba(99, 102, 241, 0.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.balance-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: var(--radius-md);
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow:
        0 2px 10px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.balance-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-add-funds {
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    min-width: auto;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 4px;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.balance-amount {
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 1.1rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.user-info .username {
    font-weight: 500;
}

/* ============================================
   Main Content
   ============================================ */
.main-content {
    min-height: 100vh;
    padding-top: 80px;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-xl);
    min-height: calc(100vh - 80px);
}

.hero-content {
    max-width: 600px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.hero-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Rainbow Text Animation */
.rainbow-text {
    background: linear-gradient(
        90deg,
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-shift 3s linear infinite;
}

/* Rainbow Scrolling Text - Continuous Left-to-Right Animation */
.rainbow-scroll {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-scroll 3s linear infinite;
}

@keyframes rainbow-scroll {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.rainbow-gradient-bg {
    background: linear-gradient(
        90deg,
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   Glass Card Effect
   ============================================ */
.glass-card {
    background: linear-gradient(165deg, rgba(35, 35, 50, 0.8) 0%, rgba(20, 20, 30, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

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

.glass-card-glow {
    background: linear-gradient(165deg, rgba(35, 35, 50, 0.8) 0%, rgba(20, 20, 30, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glass Header */
.main-header.glass-header {
    background: linear-gradient(180deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.main-header.glass-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

/* Glass Button */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Glass Input */
.glass-input {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.glass-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Floating Cards Visual */
.hero-visual {
    position: relative;
    height: 500px;
    perspective: 1000px;
}

.floating-card {
    position: absolute;
    width: 300px;
    height: auto;
    aspect-ratio: 3 / 4;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    perspective: 800px;
    transform-style: preserve-3d;
    container-type: inline-size;
}

.floating-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 400px;
}

.floating-card.card-1 {
    top: 0;
    left: 0;
    transform: rotate(0deg);
    transform-origin: 50% 95%;
    z-index: 3;
    animation: floatCard1 5s ease-in-out infinite;
}

.floating-card.card-2 {
    top: 0;
    left: 0;
    transform: rotate(-6deg);
    transform-origin: 50% 95%;
    z-index: 2;
    animation: floatCard2 6s ease-in-out infinite;
}

.floating-card.card-3 {
    top: 0;
    left: 0;
    transform: rotate(6deg);
    transform-origin: 50% 95%;
    animation-delay: -4s;
    z-index: 1;
}

.floating-card[data-rarity="mythic"] {
    filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.5)) drop-shadow(0 0 40px rgba(168, 85, 247, 0.3));
}

/* Mythic floating card: rotating rainbow aura */
.floating-card[data-rarity="mythic"]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(236, 72, 153, 0.7),
        rgba(168, 85, 247, 0.7),
        rgba(59, 130, 246, 0.5),
        rgba(16, 185, 129, 0.5),
        rgba(245, 158, 11, 0.6),
        rgba(236, 72, 153, 0.7)
    );
    z-index: -1;
    animation: mythic-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
    pointer-events: none;
}

.floating-card[data-rarity="legendary"] {
    filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.25));
}

.floating-card[data-rarity="epic"] {
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.2));
}

.floating-card[data-rarity="demonic"] {
    filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(139, 0, 0, 0.3));
    animation: floatCard1 5s ease-in-out infinite, demonicPulseHero 3s ease-in-out infinite;
}

/* Demonic floating card: pulsing blood-red aura */
.floating-card[data-rarity="demonic"]::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(139, 0, 0, 0.9),
        rgba(50, 0, 0, 0.7),
        rgba(180, 0, 0, 0.5),
        rgba(0, 0, 0, 0.8),
        rgba(120, 0, 0, 0.6),
        rgba(139, 0, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 3s linear infinite;
    filter: blur(10px);
    opacity: 0.85;
    pointer-events: none;
}

@keyframes demonicPulseHero {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(139, 0, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 30px rgba(139, 0, 0, 0.8)) drop-shadow(0 0 55px rgba(139, 0, 0, 0.45)); }
}

/* Holy floating card: divine golden radiance */
.floating-card[data-rarity="holy"] {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 50px rgba(255, 248, 220, 0.4));
    animation: floatCard1 5s ease-in-out infinite, holyPulseHero 4s ease-in-out infinite;
}

.floating-card[data-rarity="holy"]::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(255, 215, 0, 0.9),
        rgba(255, 248, 220, 0.7),
        rgba(218, 165, 32, 0.6),
        rgba(255, 255, 255, 0.8),
        rgba(255, 223, 0, 0.7),
        rgba(255, 215, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 5s linear infinite;
    filter: blur(12px);
    opacity: 0.8;
    pointer-events: none;
}

@keyframes holyPulseHero {
    0%, 100% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 50px rgba(255, 248, 220, 0.4)); }
    50% { filter: drop-shadow(0 0 35px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 65px rgba(255, 248, 220, 0.6)); }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #7C3AED 100%);
    color: white;
    box-shadow:
        0 4px 15px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(99, 102, 241, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 50%, #8B5CF6 100%);
}

.btn-accent {
    background: linear-gradient(135deg, #9333EA 0%, #7C3AED 50%, #6D28D9 100%);
    color: white;
    box-shadow:
        0 4px 15px rgba(147, 51, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(147, 51, 234, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #A855F7 0%, #9333EA 50%, #7C3AED 100%);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 4px 15px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
}

.btn-small {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8125rem;
}

.btn-buy {
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    color: white;
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 15px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-buy:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 25px rgba(16, 185, 129, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #4ADE80 0%, #10B981 100%);
}

.btn-buy:active {
    transform: translateY(0) scale(1);
}

.btn-buy:disabled,
.btn-buy.btn-disabled {
    background: linear-gradient(135deg, #4B5563 0%, #374151 100%);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
    box-shadow: none;
}

.cta-button {
    position: relative;
}

.cta-button .btn-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg,
        var(--rarity-mythic),
        var(--rarity-legendary),
        var(--rarity-epic),
        var(--rarity-rare)
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    transition: opacity var(--transition-normal);
}

.cta-button:hover .btn-glow {
    opacity: 0.6;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ============================================
   Features Section
   ============================================ */
.features {
    padding: var(--space-lg) var(--space-xl);
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-normal);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    color: var(--color-accent);
}

.feature-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.feature-description {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ============================================
   Rarity Showcase
   ============================================ */
.rarity-showcase {
    padding: var(--space-lg) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.rarity-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

.rarity-item {
    flex: 0 1 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.rarity-item:hover {
    border-color: var(--rarity-color);
    box-shadow: 0 0 15px color-mix(in srgb, var(--rarity-color) 30%, transparent);
}

.rarity-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.rarity-badge.common {
    background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
    color: #1a1a24;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.rarity-badge.uncommon {
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
.rarity-badge.rare {
    background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5);
}
.rarity-badge.epic {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.5);
}
.rarity-badge.legendary {
    background: linear-gradient(135deg, #FCD34D 0%, #D97706 100%);
    color: #1a1a24;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 15px rgba(245, 158, 11, 0.5);
    animation: legendary-pulse 2s ease-in-out infinite;
}
.rarity-badge.mythic {
    background: linear-gradient(135deg, #F472B6 0%, #DB2777 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 18px rgba(236, 72, 153, 0.6);
    animation: mythic-glow 1.5s ease-in-out infinite alternate;
}
.rarity-badge.demonic {
    background: linear-gradient(135deg, #8B0000 0%, #4A0000 100%);
    color: #FF4444;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(139, 0, 0, 0.5);
    box-shadow: 0 2px 20px rgba(139, 0, 0, 0.7);
    animation: demonic-glow 1s ease-in-out infinite alternate;
}
@keyframes demonic-glow {
    0% { box-shadow: 0 2px 20px rgba(139, 0, 0, 0.5); }
    100% { box-shadow: 0 2px 30px rgba(180, 0, 0, 0.8), 0 0 50px rgba(139, 0, 0, 0.3); }
}

@keyframes legendary-pulse {
    0%, 100% { box-shadow: 0 2px 15px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 2px 25px rgba(245, 158, 11, 0.7); }
}

@keyframes mythic-glow {
    0% { box-shadow: 0 2px 18px rgba(236, 72, 153, 0.6); }
    100% { box-shadow: 0 2px 30px rgba(236, 72, 153, 0.8), 0 0 40px rgba(236, 72, 153, 0.4); }
}

.rarity-rate {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ============================================
   Marketplace Page
   ============================================ */
.marketplace {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.page-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.page-subtitle {
    color: var(--color-text-muted);
    font-size: 1.125rem;
}

/* Low Balance Banner */
.low-balance-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
    border-color: var(--rarity-legendary);
}

.low-balance-banner .banner-icon {
    font-size: 2rem;
}

.low-balance-banner .banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.low-balance-banner .banner-content strong {
    color: var(--rarity-legendary);
}

.low-balance-banner .banner-content span {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .low-balance-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* Deck Selector Bar */
.deck-selector {
    display: flex;
    gap: 8px;
    padding: 0 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: center;
}
.deck-selector::-webkit-scrollbar { display: none; }
.deck-pill {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.deck-pill:hover { background: rgba(255,255,255,0.1); color: #fff; }
.deck-pill.active {
    background: var(--deck-color, #8B5CF6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 12px color-mix(in srgb, var(--deck-color, #8B5CF6) 40%, transparent);
}

/* Wallet Deck Section Headers */
.deck-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 1.5rem 0 1rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--deck-color, #8B5CF6);
    grid-column: 1 / -1;
}
.deck-section-icon { font-size: 1.2rem; }
.deck-section-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.deck-section-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}

/* Wallet Division Headers (Graded / Ungraded sections) */
.wallet-division {
    margin-bottom: 2rem;
}
.wallet-division-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border-bottom: 2px solid rgba(255,255,255,0.08);
}
.wallet-division-icon {
    font-size: 1.1rem;
    opacity: 0.7;
}
.wallet-division-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0;
}
.wallet-division-count {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

/* Graded section accent */
#graded-section .wallet-division-header {
    border-bottom-color: rgba(251,191,36,0.3);
}
#graded-section .wallet-division-icon {
    color: #f59e0b;
}
#graded-section .wallet-division-count {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}

/* Deck Background Cycling */
.deck-bg-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.deck-bg-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.deck-bg-container img.active {
    opacity: 1;
}
.deck-bg-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 10, 20, 0.55) 0%,
        rgba(10, 10, 20, 0.7) 40%,
        rgba(10, 10, 20, 0.85) 70%,
        rgba(10, 10, 20, 0.95) 100%);
    pointer-events: none;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.tab-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: var(--color-accent);
    color: var(--color-text);
}

.tab-icon {
    font-size: 1.25rem;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Filters Bar */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.filter-group label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.filter-select,
.filter-input {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.875rem;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.agent-count {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-label .checkmark {
    width: 18px;
    height: 18px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: "✓";
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.checkbox-label:hover .checkmark {
    border-color: var(--color-accent);
}

/* ============================================
   Agent Cards Grid
   ============================================ */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.agent-card {
    position: relative;
    background: linear-gradient(165deg, rgba(30, 30, 45, 0.9) 0%, rgba(20, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.agent-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.agent-card {
    transform-style: preserve-3d;
    will-change: transform;
}

.agent-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    /* Base hover - JS overrides with tilt */
    transform: translateY(-8px) scale(1.02);
}

.agent-card[data-rarity="common"] {
    border-color: rgba(156, 163, 175, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(156, 163, 175, 0.1);
}
.agent-card[data-rarity="uncommon"] {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.1);
}
.agent-card[data-rarity="rare"] {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 25px rgba(59, 130, 246, 0.15);
}
.agent-card[data-rarity="epic"] {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.2);
}
.agent-card[data-rarity="legendary"] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 35px rgba(245, 158, 11, 0.25);
}
.agent-card[data-rarity="mythic"] {
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.3);
    background: linear-gradient(165deg, rgba(40, 25, 45, 0.95) 0%, rgba(25, 15, 30, 0.98) 100%);
}
.agent-card[data-rarity="demonic"] {
    border-color: rgba(139, 0, 0, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 50px rgba(139, 0, 0, 0.4), 0 0 100px rgba(80, 0, 0, 0.2);
    background: linear-gradient(165deg, rgba(30, 5, 5, 0.98) 0%, rgba(10, 0, 0, 0.99) 100%);
}

.agent-card[data-rarity="common"]:hover {
    border-color: var(--rarity-common);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(156, 163, 175, 0.3);
}
.agent-card[data-rarity="uncommon"]:hover {
    border-color: var(--rarity-uncommon);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.35);
}
.agent-card[data-rarity="rare"]:hover {
    border-color: var(--rarity-rare);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 50px rgba(59, 130, 246, 0.4);
}
.agent-card[data-rarity="epic"]:hover {
    border-color: var(--rarity-epic);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(139, 92, 246, 0.45);
}
.agent-card[data-rarity="legendary"]:hover {
    border-color: var(--rarity-legendary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 70px rgba(245, 158, 11, 0.5);
}
.agent-card[data-rarity="mythic"]:hover {
    border-color: var(--rarity-mythic);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(236, 72, 153, 0.55);
}
.agent-card[data-rarity="demonic"]:hover {
    border-color: var(--rarity-demonic);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 100px rgba(139, 0, 0, 0.6), 0 0 200px rgba(80, 0, 0, 0.3);
}

/* Holographic Effect - Premium */
.card-holographic {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 0, 0, 0.03) 10%,
            rgba(255, 154, 0, 0.05) 20%,
            rgba(208, 222, 33, 0.05) 30%,
            rgba(79, 220, 74, 0.05) 40%,
            rgba(63, 218, 216, 0.05) 50%,
            rgba(47, 201, 226, 0.05) 60%,
            rgba(28, 127, 238, 0.05) 70%,
            rgba(95, 21, 242, 0.05) 80%,
            rgba(186, 12, 248, 0.03) 90%,
            transparent 100%
        );
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    filter: blur(8px);
}

.card-holographic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(6px);
}

.agent-card:hover .card-holographic {
    opacity: 1;
    animation: holographic-rainbow 3s ease-in-out infinite;
}

.agent-card:hover .card-holographic::after {
    opacity: 1;
    animation: holographic-shine 2s ease-in-out infinite;
}

@keyframes holographic-rainbow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes holographic-shine {
    0% { background-position: -100% -100%; }
    100% { background-position: 200% 200%; }
}

/* Rarity-specific holographic intensity */
.agent-card[data-rarity="epic"] .card-holographic,
.agent-card[data-rarity="legendary"] .card-holographic,
.agent-card[data-rarity="mythic"] .card-holographic {
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 0, 0, 0.06) 10%,
            rgba(255, 154, 0, 0.08) 20%,
            rgba(208, 222, 33, 0.08) 30%,
            rgba(79, 220, 74, 0.08) 40%,
            rgba(63, 218, 216, 0.08) 50%,
            rgba(47, 201, 226, 0.08) 60%,
            rgba(28, 127, 238, 0.08) 70%,
            rgba(95, 21, 242, 0.08) 80%,
            rgba(186, 12, 248, 0.06) 90%,
            transparent 100%
        );
    background-size: 300% 300%;
}

/* Epic+ cards: always-on holographic shine */
.agent-card[data-rarity="epic"] .card-holographic,
.agent-card[data-rarity="legendary"] .card-holographic,
.agent-card[data-rarity="mythic"] .card-holographic,
.agent-card[data-rarity="demonic"] .card-holographic,
.agent-card[data-rarity="holy"] .card-holographic {
    opacity: 1;
    animation: holographic-rainbow 4s ease-in-out infinite;
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 50, 50, 0.1) 10%,
            rgba(255, 180, 0, 0.14) 20%,
            rgba(220, 240, 50, 0.12) 30%,
            rgba(50, 240, 80, 0.12) 40%,
            rgba(50, 220, 240, 0.14) 50%,
            rgba(50, 130, 255, 0.12) 60%,
            rgba(130, 50, 255, 0.12) 70%,
            rgba(220, 30, 255, 0.1) 80%,
            rgba(255, 50, 150, 0.08) 90%,
            transparent 100%
        );
    background-size: 300% 300%;
}

.agent-card[data-rarity="legendary"] .card-holographic::after,
.agent-card[data-rarity="mythic"] .card-holographic::after {
    opacity: 1;
    animation: holographic-gloss 3s ease-in-out infinite;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(255, 255, 255, 0.18) 42%,
        rgba(255, 255, 255, 0.06) 49%,
        transparent 65%
    );
    background-size: 250% 100%;
}

@keyframes holographic-gloss {
    0% { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}

/* Mythic magic aura effect */
.agent-card[data-rarity="mythic"]::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(236, 72, 153, 0.7),
        rgba(168, 85, 247, 0.7),
        rgba(59, 130, 246, 0.5),
        rgba(16, 185, 129, 0.5),
        rgba(245, 158, 11, 0.6),
        rgba(236, 72, 153, 0.7)
    );
    z-index: -1;
    animation: mythic-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

.agent-card[data-rarity="mythic"]:hover::after {
    opacity: 1;
    filter: blur(12px);
    inset: -8px;
}

@keyframes mythic-rotate {
    0% { --mythic-angle: 0deg; }
    100% { --mythic-angle: 360deg; }
}

@property --mythic-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Demonic dark aura effect - pulsing blood red with shadow tendrils */
.agent-card[data-rarity="demonic"]::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(139, 0, 0, 0.9),
        rgba(50, 0, 0, 0.7),
        rgba(180, 0, 0, 0.5),
        rgba(0, 0, 0, 0.8),
        rgba(120, 0, 0, 0.6),
        rgba(139, 0, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 3s linear infinite;
    filter: blur(10px);
    opacity: 0.85;
}

.agent-card[data-rarity="demonic"]:hover::after {
    opacity: 1;
    filter: blur(16px);
    inset: -12px;
}

/* Demonic holographic - dark red shift */
.agent-card[data-rarity="demonic"] .card-holographic {
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(139, 0, 0, 0.15) 20%,
            rgba(80, 0, 0, 0.12) 40%,
            rgba(200, 0, 0, 0.1) 60%,
            rgba(50, 0, 0, 0.15) 80%,
            transparent 100%
        );
    background-size: 300% 300%;
    animation: holographic-rainbow 3s ease-in-out infinite;
    opacity: 1;
}

/* Mythic gets extra intense */
.agent-card[data-rarity="mythic"] .card-holographic {
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 50, 100, 0.15) 10%,
            rgba(255, 200, 0, 0.18) 20%,
            rgba(100, 255, 100, 0.16) 35%,
            rgba(50, 200, 255, 0.18) 50%,
            rgba(150, 50, 255, 0.16) 65%,
            rgba(255, 50, 200, 0.15) 80%,
            transparent 100%
        );
    background-size: 300% 300%;
    animation: holographic-rainbow 3s ease-in-out infinite;
}

.agent-card .rarity-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 5;
}

.card-content {
    padding: var(--space-lg);
    position: relative;
    z-index: 3;
}

.card-face-container {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.agent-card:hover .card-face-container {
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.agent-card[data-rarity="epic"] .card-face-container {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
}

.agent-card[data-rarity="legendary"] .card-face-container {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 25px rgba(245, 158, 11, 0.25);
}

.agent-card[data-rarity="mythic"] .card-face-container {
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(236, 72, 153, 0.3);
}

.face-canvas {
    border-radius: 50%;
}

.agent-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-xs);
    background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.agent-card[data-rarity="legendary"] .agent-name {
    background: linear-gradient(180deg, #FEF3C7 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.agent-card[data-rarity="mythic"] .agent-name {
    background: linear-gradient(180deg, #FBCFE8 0%, #EC4899 50%, #DB2777 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.agent-type {
    font-size: 0.8rem;
    color: var(--color-accent);
    text-align: center;
    margin-bottom: var(--space-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.agent-description {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Agent Stats */
.agent-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.agent-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    min-width: 50px;
}

.agent-stats .stat-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.agent-stats .stat-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    font-family: var(--font-display);
}

.agent-ability {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.agent-ability .ability-label {
    color: var(--rarity-rare);
    font-weight: 600;
}

/* World Stats Display */
.agent-world-stats {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.world-stat {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--font-display);
}

.world-stat.power {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.world-stat.defense {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.world-stat.gather {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Ability Info Display */
.agent-ability-info {
    text-align: center;
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.03));
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.ability-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rarity-rare);
    margin-bottom: 0.125rem;
}

.ability-benefit {
    display: block;
    font-size: 0.65rem;
    color: var(--color-text);
    font-weight: 500;
}

/* Power Badge for Elite Agents */
.power-badge {
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.2rem 0.4rem;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    animation: elitePulse 2s ease-in-out infinite;
    z-index: 5;
}

@keyframes elitePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(255, 215, 0, 0.7); }
}

/* Quantity Remaining Badge */
.quantity-remaining {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(135deg, rgba(30, 30, 45, 0.9) 0%, rgba(20, 20, 30, 0.95) 100%);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text);
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.quantity-remaining.depleted {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(185, 28, 28, 0.95) 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

/* Sold Out Card State — full display, not grayed out */
.agent-card.sold-out {
    pointer-events: auto;
}

/* No hover transform on sold-out cards */
.agent-card.sold-out:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Hide hovering price/buy bar on sold-out art cards — SOLD OUT banner is sufficient */
.agent-card.card-art-mode.sold-out .card-art-bottom {
    display: none;
}

/* Simple SOLD OUT sticker — sits on the card, no red glow */
.agent-card.sold-out::after,
.agent-card.sold-out:hover::after,
.agent-card.sold-out[data-rarity]::after,
.agent-card.sold-out[data-rarity]:hover::after {
    content: "SOLD OUT";
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: clamp(1rem, 5cqi, 2rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    background: rgba(220, 38, 38, 0.9);
    padding: 4px 20px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    filter: none;
    opacity: 1;
    animation: none;
}

/* Kill ::before aura on sold-out cards too */
.agent-card.sold-out::before,
.agent-card.sold-out:hover::before,
.agent-card.sold-out[data-rarity]::before,
.agent-card.sold-out[data-rarity]:hover::before {
    display: none !important;
}

/* Enhanced Holographic Effect - Faint */
.card-holographic {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 15%,
        rgba(147, 197, 253, 0.05) 30%,
        rgba(196, 181, 253, 0.05) 45%,
        rgba(252, 211, 77, 0.05) 60%,
        rgba(255, 255, 255, 0.03) 75%,
        transparent 100%
    );
    background-size: 400% 400%;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    z-index: 1;
}

.agent-card:hover .card-holographic {
    opacity: 1;
    animation: holographic-faint 4s linear infinite;
}

@keyframes holographic-faint {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Card Hover Float Effect */
.agent-card {
    transition: all var(--transition-normal), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.agent-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    margin-bottom: calc(-1 * var(--space-lg));
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.agent-price {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #FEF3C7 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ============================================
   Card Packs
   ============================================ */
.packs-intro {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
}

.packs-grid {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    flex-wrap: nowrap;
}

/* ============================================
   PACK STANDARD — Reference for ALL pack rendering
   ============================================

   IMAGE SPECS:
   - Foil Packs: 864 x 1184 px (3:4.1 aspect ratio)
   - Pull Packs: 864 x 1152 px (3:4 aspect ratio, matches card size)
   - Format: WebP with transparency (lime green BFS-removed background)
   - Stored: /assets/images/packs/pack_{id}.webp (foil)
             /assets/images/packs/pull_{slug}.webp (pull)
   - Torn:   /assets/images/packs/pack_{id}_torn.webp
             /assets/images/packs/pull_{slug}_torn.webp

   RULES:
   1. NO CONTAINERS. The pack image IS the pack (like cards).
   2. border-radius: var(--pack-radius) on <img> and overlays.
   3. Glow via filter: drop-shadow() — NEVER box-shadow.
   4. container-type: inline-size on wrapper for cqi text scaling.
   5. perspective: 800px + transform-style: preserve-3d for 3D tilt.
   6. Float text at translate3d(0,0,30px) with parallax via JS mousemove.
   7. All text sizes use clamp() with cqi middle value.

   CSS SIZING (via custom properties in :root):
     --pack-width:         280px   Foil pack marketplace display
     --pull-width:         220px   Pull pack marketplace display
     --pack-aspect:        3/4.1   Foil pack ratio (taller than card)
     --pull-aspect:        3/4     Pull pack ratio (matches card)
     --pack-modal-width:   320px   Pack in opening animation modal
     --pack-confirm-width: 120px   Pack thumbnail in confirm dialog
     --pack-radius:        12px    Border radius on all pack images

   HTML TEMPLATE — Foil Pack (marketplace):
   ─────────────────────────────────────────
   <div class="pack-foil" data-pack="ICON" data-id="ID">
       <img class="pack-foil-img" src="PATH.webp" alt="NAME" draggable="false">
       <div class="pack-float-text">
           <span class="pack-float-name">PACK NAME</span>
           <span class="pack-float-cards">N Cards</span>
           <span class="pack-float-price">$##.##</span>
           <button class="btn btn-buy-pack" data-pack-id="ID">Open</button>
       </div>
   </div>

   HTML TEMPLATE — Pull Pack (marketplace, same structure):
   ─────────────────────────────────────────
   <div class="pack-foil pack-pull" data-pack="ICON" data-id="ID">
       <img class="pack-foil-img" src="PATH.webp" alt="NAME" draggable="false">
       <div class="pack-float-text">
           <span class="pack-float-name">PACK NAME</span>
           <span class="pack-float-cards">1 Card</span>
           <span class="pack-float-price">$##.##</span>
           <button class="btn btn-buy-pack" data-pack-id="ID">Pull</button>
       </div>
   </div>

   TEXT SIZES (cqi = scales linearly with pack width):
     .pack-float-name:   clamp(0.7rem, 3.2cqi, 1.1rem)   Cinzel 700
     .pack-float-cards:  clamp(0.55rem, 2.2cqi, 0.75rem)  Rajdhani 600
     .pack-float-price:  clamp(0.8rem, 3.5cqi, 1.2rem)    Space Grotesk 700

   PARALLAX (JS — same handler as cards):
     Pack tilt: perspective(600px) rotateX/Y ±12/±8deg
     Text shift: translate3d(±8px, ±5px, 30px) opposite to tilt

   CONTEXTS:
     1. Marketplace grid:  var(--pack-width) / var(--pull-width)
     2. Opening modal:     var(--pack-modal-width) in .pack-wrapper
     3. Confirm dialog:    var(--pack-confirm-width) for .confirm-pack-art
     4. Responsive 600px:  pack-width shrinks to 220px, pull to 180px

   ============================================ */

/* ---- Foil Pack (marketplace) ---- */
.pack-foil {
    position: relative;
    width: var(--pack-width);
    aspect-ratio: var(--pack-aspect);
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.3s ease;
    will-change: transform;
    perspective: 800px;
    transform-style: preserve-3d;
    container-type: inline-size;
}

/* Pull packs — smaller, card-proportioned */
.pack-foil.pack-pull {
    width: var(--pull-width);
    aspect-ratio: var(--pull-aspect);
}

.pack-foil-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
    border-radius: var(--pack-radius);
}

/* Pack overlays removed - transparent images need no overlays */

/* Floating text overlay on pack */
.pack-float-text {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translate3d(-50%, 0, 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 32px 14px;
    pointer-events: none;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    gap: 3px;
    background: radial-gradient(ellipse 70% 80% at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    white-space: nowrap;
}

.pack-float-name {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 3.2cqi, 1.1rem);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 4px 16px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.6);
}

.pack-float-cards {
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 600;
    font-size: clamp(0.55rem, 2.2cqi, 0.75rem);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow:
        0 1px 6px rgba(0, 0, 0, 1),
        0 3px 10px rgba(0, 0, 0, 0.7);
}

.pack-float-guaranteed {
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(0.55rem, 2.2cqi, 0.75rem);
    color: var(--rarity-rare);
    text-shadow:
        0 1px 6px rgba(0, 0, 0, 1),
        0 3px 10px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.08em;
}

.pack-float-price {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 3.5cqi, 1.2rem);
    font-weight: 700;
    background: linear-gradient(135deg, #FEF3C7 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
    margin-top: 2px;
}

.pack-float-text .btn-buy-pack {
    pointer-events: auto;
    margin-top: 4px;
    background: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #7C3AED 100%);
    color: white;
    padding: 6px 20px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(99, 102, 241, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    cursor: pointer;
    letter-spacing: 0.05em;
}

.pack-float-text .btn-buy-pack:hover {
    transform: scale(1.08);
    box-shadow:
        0 6px 20px rgba(99, 102, 241, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 50%, #8B5CF6 100%);
}

/* Per-tier glow auras */
.pack-foil[data-pack="legendary"] .pack-foil-img {
    filter: drop-shadow(0 8px 25px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.2));
}
.pack-foil[data-pack="legendary"] {
    animation: packGlowLegendary 3s ease-in-out infinite;
}
@keyframes packGlowLegendary {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.3)); }
    50% { filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 60px rgba(245, 158, 11, 0.2)); }
}

.pack-foil[data-pack="elite"] .pack-foil-img {
    filter: drop-shadow(0 8px 25px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.15));
}

.pack-foil[data-pack="premium"] .pack-foil-img {
    filter: drop-shadow(0 8px 25px rgba(59, 130, 246, 0.35)) drop-shadow(0 0 25px rgba(59, 130, 246, 0.1));
}

.pack-foil[data-pack="standard"] .pack-foil-img {
    filter: drop-shadow(0 8px 20px rgba(16, 185, 129, 0.3));
}

.pack-foil[data-pack="starter"] .pack-foil-img {
    filter: drop-shadow(0 8px 20px rgba(156, 163, 175, 0.25));
}

/* ---- Legacy fallback pack-card (no image) ---- */
.pack-card {
    position: relative;
    background: linear-gradient(165deg, rgba(35, 35, 55, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 200px;
}

.pack-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.pack-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    animation: pack-glow-rotate 10s linear infinite;
}

.pack-card:hover .pack-glow { opacity: 1; }

@keyframes pack-glow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pack-icon {
    width: 80px; height: 80px;
    margin: 0 auto var(--space-lg);
    background: linear-gradient(135deg, var(--color-accent), var(--rarity-epic));
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}
.pack-icon::before { content: "\1F4E6"; }

.pack-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.pack-description {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.pack-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    font-size: 0.8rem;
}

.pack-cards-count { color: var(--color-text); }
.pack-guaranteed { color: var(--rarity-rare); }

.pack-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: var(--space-md);
}

.pack-price {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #FEF3C7 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.btn-buy-pack {
    background: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #7C3AED 100%);
    color: white;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-buy-pack:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 50%, #8B5CF6 100%);
}

/* ============================================
   SINGLE CARD DRAWS GRID
   ============================================ */

.draws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* --- Split Layout for Packs Tab --- */
/* ============================================
   Pack Category Navigation & Showcase
   ============================================ */

/* Category pill bar */
.pack-category-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.pack-category-pill {
    padding: 8px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.pack-category-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.2);
}

.pack-category-pill.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(124, 58, 237, 0.2));
    color: #fff;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Category description */
.pack-category-desc {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-xl);
    letter-spacing: 0.02em;
}

/* Pack showcase grid */
.pack-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-md) 0 var(--space-2xl);
}

.pack-showcase .pack-foil {
    flex-shrink: 0;
}

/* Collector's Box with image — square aspect */
.pack-foil.pack-box {
    width: var(--pack-width);
    aspect-ratio: 1 / 1;
}

.pack-showcase-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-2xl) 0;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .pack-category-pill {
        padding: 6px 16px;
        font-size: 0.78rem;
    }
    .pack-showcase {
        gap: var(--space-lg);
    }
}


/* Confirm dialog pack art */
.confirm-pack-art {
    width: var(--pack-confirm-width);
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

/* Responsive: smaller packs on narrow screens */
@media (max-width: 600px) {
    :root {
        --pack-width: 220px;
        --pull-width: 220px;
        --pack-modal-width: 240px;
    }
    /* pack text uses cqi — auto-scales */
}

/* ============================================
   Wallet Page
   ============================================ */
.wallet-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.stat-icon {
    font-size: 2rem;
    color: var(--color-accent);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Rarity Breakdown */
.rarity-breakdown {
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.breakdown-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.breakdown-bars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
}

.breakdown-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* Collection Section */
.collection-section {
    margin-bottom: var(--space-2xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.collection-filters {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
}

.owned-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
    padding: 0.5rem;
}

.owned-agent-card {
    position: relative;
    background: linear-gradient(165deg, rgba(30, 30, 45, 0.9) 0%, rgba(20, 20, 30, 0.95) 100%);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.owned-agent-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.owned-agent-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.2);
}
/* Cards inside graded cases must not hover-lift — case handles all transforms */
.graded-card-case .owned-agent-card:hover {
    transform: none;
    border-color: transparent;
}

.owned-agent-card .card-holographic {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 0, 0, 0.03) 10%,
            rgba(255, 154, 0, 0.05) 20%,
            rgba(208, 222, 33, 0.05) 30%,
            rgba(79, 220, 74, 0.05) 40%,
            rgba(63, 218, 216, 0.05) 50%,
            rgba(47, 201, 226, 0.05) 60%,
            rgba(28, 127, 238, 0.05) 70%,
            rgba(95, 21, 242, 0.05) 80%,
            rgba(186, 12, 248, 0.03) 90%,
            transparent 100%
        );
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}

.owned-agent-card:hover .card-holographic {
    opacity: 1;
    animation: holographic-rainbow 3s ease-in-out infinite;
}

/* Wallet card rarity styles — match marketplace exactly */
.owned-agent-card[data-rarity="common"] { border-color: rgba(156, 163, 175, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(156, 163, 175, 0.1); }
.owned-agent-card[data-rarity="uncommon"] { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.1); }
.owned-agent-card[data-rarity="rare"] { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 25px rgba(59, 130, 246, 0.15); }
.owned-agent-card[data-rarity="epic"] { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.2); }
.owned-agent-card[data-rarity="legendary"] { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 35px rgba(245, 158, 11, 0.25); }
.owned-agent-card[data-rarity="mythic"] { border-color: rgba(236, 72, 153, 0.6); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.3); background: linear-gradient(165deg, rgba(40, 25, 45, 0.95) 0%, rgba(25, 15, 30, 0.98) 100%); }
.owned-agent-card[data-rarity="demonic"] { border-color: rgba(139, 0, 0, 0.8); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 50px rgba(139, 0, 0, 0.4), 0 0 100px rgba(80, 0, 0, 0.2); background: linear-gradient(165deg, rgba(30, 5, 5, 0.98) 0%, rgba(10, 0, 0, 0.99) 100%); }

.owned-agent-card[data-rarity="common"]:hover { border-color: var(--rarity-common); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(156, 163, 175, 0.3); }
.owned-agent-card[data-rarity="uncommon"]:hover { border-color: var(--rarity-uncommon); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.35); }
.owned-agent-card[data-rarity="rare"]:hover { border-color: var(--rarity-rare); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 50px rgba(59, 130, 246, 0.4); }
.owned-agent-card[data-rarity="epic"]:hover { border-color: var(--rarity-epic); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(139, 92, 246, 0.45); }
.owned-agent-card[data-rarity="legendary"]:hover { border-color: var(--rarity-legendary); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 70px rgba(245, 158, 11, 0.5); }
.owned-agent-card[data-rarity="mythic"]:hover { border-color: var(--rarity-mythic); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(236, 72, 153, 0.55); }
.owned-agent-card[data-rarity="demonic"]:hover { border-color: var(--rarity-demonic); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 100px rgba(139, 0, 0, 0.6), 0 0 200px rgba(80, 0, 0, 0.3); }

/* Epic+ owned cards: always-on holographic shine */
.owned-agent-card[data-rarity="epic"] .card-holographic,
.owned-agent-card[data-rarity="legendary"] .card-holographic,
.owned-agent-card[data-rarity="mythic"] .card-holographic,
.owned-agent-card[data-rarity="demonic"] .card-holographic {
    opacity: 1;
    animation: holographic-rainbow 4s ease-in-out infinite;
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 50, 50, 0.1) 10%,
            rgba(255, 180, 0, 0.14) 20%,
            rgba(220, 240, 50, 0.12) 30%,
            rgba(50, 240, 80, 0.12) 40%,
            rgba(50, 220, 240, 0.14) 50%,
            rgba(50, 130, 255, 0.12) 60%,
            rgba(130, 50, 255, 0.12) 70%,
            rgba(220, 30, 255, 0.1) 80%,
            rgba(255, 50, 150, 0.08) 90%,
            transparent 100%
        );
    background-size: 300% 300%;
}

.owned-agent-card[data-rarity="legendary"] .card-holographic::after,
.owned-agent-card[data-rarity="mythic"] .card-holographic::after {
    opacity: 1;
    animation: holographic-gloss 3s ease-in-out infinite;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(255, 255, 255, 0.18) 42%,
        rgba(255, 255, 255, 0.06) 49%,
        transparent 65%
    );
    background-size: 250% 100%;
}

/* Mythic aura — rotating rainbow conic-gradient */
.owned-agent-card[data-rarity="mythic"]::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(236, 72, 153, 0.7),
        rgba(168, 85, 247, 0.7),
        rgba(59, 130, 246, 0.5),
        rgba(16, 185, 129, 0.5),
        rgba(245, 158, 11, 0.6),
        rgba(236, 72, 153, 0.7)
    );
    z-index: -1;
    animation: mythic-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

.owned-agent-card[data-rarity="mythic"]:hover::after {
    opacity: 1;
    filter: blur(12px);
    inset: -8px;
}

/* Demonic aura — pulsing blood red */
.owned-agent-card[data-rarity="demonic"]::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(139, 0, 0, 0.9),
        rgba(50, 0, 0, 0.7),
        rgba(180, 0, 0, 0.5),
        rgba(0, 0, 0, 0.8),
        rgba(120, 0, 0, 0.6),
        rgba(139, 0, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 3s linear infinite;
    filter: blur(10px);
    opacity: 0.85;
}

.owned-agent-card[data-rarity="demonic"]:hover::after {
    opacity: 1;
    filter: blur(16px);
    inset: -12px;
}

/* Demonic holographic — dark red shift */
.owned-agent-card[data-rarity="demonic"] .card-holographic {
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(139, 0, 0, 0.15) 20%,
            rgba(80, 0, 0, 0.12) 40%,
            rgba(200, 0, 0, 0.1) 60%,
            rgba(50, 0, 0, 0.15) 80%,
            transparent 100%
        );
    background-size: 300% 300%;
    animation: holographic-rainbow 3s ease-in-out infinite;
    opacity: 1;
}

/* Mythic extra-intense holographic */
.owned-agent-card[data-rarity="mythic"] .card-holographic {
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 50, 100, 0.15) 10%,
            rgba(255, 200, 0, 0.18) 20%,
            rgba(100, 255, 100, 0.16) 35%,
            rgba(50, 200, 255, 0.18) 50%,
            rgba(150, 50, 255, 0.16) 65%,
            rgba(255, 50, 150, 0.14) 80%,
            transparent 100%
        );
    background-size: 300% 300%;
}

.quantity-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
}

.owned-agent-card .rarity-badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 2;
    font-size: 0.65rem;
    padding: 2px 8px;
}

.owned-agent-card .card-content {
    padding: var(--space-md);
}

.owned-agent-card .card-face-container {
    width: 80px;
    height: 80px;
}

.owned-agent-card .agent-name {
    font-size: 0.9375rem;
}

.card-value {
    text-align: center;
    font-size: 0.875rem;
    color: var(--rarity-legendary);
    font-weight: 600;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-3xl);
}

.empty-state.hidden {
    display: none;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.empty-state p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* Transactions */
.transactions-section {
    margin-bottom: var(--space-2xl);
}

.transactions-list {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.transaction-item:last-child {
    border-bottom: none;
}

.transaction-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.transaction-type {
    font-weight: 600;
    text-transform: capitalize;
}

.transaction-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.transaction-amount {
    font-family: var(--font-display);
    font-weight: 700;
}

.transaction-amount.negative {
    color: #ef4444;
}

.transaction-amount.positive {
    color: var(--rarity-uncommon);
}

.transaction-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ============================================
   Profile Page
   ============================================ */
.profile-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.profile-avatar {
    width: 100px;
    height: 100px;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-accent), var(--rarity-epic));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.profile-info {
    text-align: center;
}

.profile-username {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.profile-email {
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.profile-member-since {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.profile-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl);
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
}

.profile-balance .balance-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.profile-balance .balance-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rarity-legendary);
}

.profile-referral {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl);
    background: rgba(34, 197, 94, 0.08);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
}
.profile-referral .referral-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.profile-referral .referral-code-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.profile-referral .referral-code {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}
.profile-referral .referral-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.profile-placeholder {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.profile-placeholder h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.profile-placeholder p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.upcoming-features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.upcoming-features li {
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.quick-links {
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.quick-links h3 {
    font-size: 1rem;
    margin-bottom: var(--space-md);
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.quick-link-card:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--color-accent);
}

.link-icon {
    font-size: 1.5rem;
}

.link-text {
    font-weight: 500;
    color: var(--color-text);
}

/* ============================================
   Loading States
   ============================================ */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    color: var(--color-text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-md);
}

/* ============================================
   Notifications
   ============================================ */
.notification {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    animation: slideIn 0.3s ease;
}

.notification.hidden {
    display: none;
}

.notification.success {
    border-color: var(--rarity-uncommon);
}

.notification.error {
    border-color: #ef4444;
}

/* ============================================
   Modal
   ============================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: scaleIn 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.modal-close:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.modal-body {
    padding: var(--space-xl);
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Pack Opening Animation */
#pack-modal .modal-content {
    max-width: 1100px;
    max-height: 98vh;
    background: radial-gradient(ellipse at center, #1a1835 0%, #0f0d1a 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    overflow: hidden;
}

#pack-modal .modal-content::-webkit-scrollbar {
    width: 4px;
}

#pack-modal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

#pack-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

.pack-opening-animation {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pack-opening-animation.hidden { display: none; }

.pack-opening-animation.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Pack Wrapper */
.pack-wrapper {
    perspective: 1200px;
    position: relative;
}

/* Glow orb behind pack */
.pack-glow-orb {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: orbPulse 3s ease-in-out infinite;
}

.pack-glow-orb.pulse-intense {
    animation: orbPulseIntense 0.8s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes orbPulseIntense {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Pack Foil (animation modal only) */
.pack-wrapper .pack-foil {
    width: var(--pack-modal-width);
    height: auto;
    position: relative;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1647 20%, #302b63 40%, #24243e 60%, #0f0c29 100%);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    z-index: 1;
}

/* Pack with real art image - no container */
.pack-wrapper .pack-foil.has-art {
    background: none;
    overflow: visible;
    height: auto;
    box-shadow: none;
    border-radius: 12px;
    border: none;
    width: 380px;
}

.pack-anim-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.7));
    border-radius: 12px;
}

/* Flash on tear */
.pack-tear-flash {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
}

/* Top flash — horizontal burst at the rip point */
.pack-tear-flash-top {
    position: absolute;
    top: -5%;
    left: -20%;
    width: 140%;
    height: 30%;
    background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.95) 0%, rgba(255,220,100,0.5) 40%, transparent 70%);
    z-index: 21;
    pointer-events: none;
    animation: tearFlashTop 0.5s ease-out forwards;
}

@keyframes tearFlashTop {
    0% { opacity: 0; transform: scaleY(0.3); }
    20% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1.5); }
}

/* Shake on tear — builds intensity */
.pack-wrapper .pack-foil.pack-shake {
    animation: packShake 0.45s ease-in-out;
}

@keyframes packShake {
    0%   { transform: translateX(0) rotate(0); }
    10%  { transform: translateX(-2px) rotate(-0.5deg); }
    20%  { transform: translateX(2px) rotate(0.5deg); }
    30%  { transform: translateX(-3px) rotate(-0.8deg); }
    40%  { transform: translateX(4px) rotate(1deg); }
    50%  { transform: translateX(-5px) rotate(-1.2deg); }
    60%  { transform: translateX(6px) rotate(1.5deg); }
    70%  { transform: translateX(-7px) rotate(-1.8deg); }
    80%  { transform: translateX(8px) rotate(2deg); }
    90%  { transform: translateX(-6px) rotate(-1.5deg); }
    100% { transform: translateX(0) rotate(0); }
}

/* Sealed image tears away upward */
.pack-wrapper .pack-foil .pack-anim-img.pack-sealed-rip {
    animation: sealedRipAway 0.4s ease-in forwards;
    transform-origin: top center;
}

@keyframes sealedRipAway {
    0%   { clip-path: inset(0 0 0 0); opacity: 1; }
    30%  { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}

/* Torn image fades in underneath */
.pack-wrapper .pack-foil .pack-anim-img.pack-torn-reveal {
    animation: tornReveal 0.4s ease-out forwards;
}

@keyframes tornReveal {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
}

/* Art pack torn fly-away — lift up, tilt, and fade */
.pack-wrapper .pack-foil.has-art.torn {
    animation: packArtFlyAway 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes packArtFlyAway {
    0%   { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
    30%  { transform: scale(1.05) translateY(-15px) rotate(-2deg); opacity: 1; }
    100% { transform: scale(0.7) translateY(-60px) rotate(5deg); opacity: 0; }
}

.pack-wrapper .pack-foil:hover {
    transform: scale(1.04) rotateY(-3deg) rotateX(2deg);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(99, 102, 241, 0.35);
}

.pack-wrapper .pack-foil.has-art:hover {
    box-shadow: none;
}

.pack-front {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    gap: 4px;
}

.pack-emblem {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
    border: 2px solid rgba(251, 191, 36, 0.5);
    border-radius: 50%;
    margin-bottom: 8px;
    position: relative;
}

.pack-emblem::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 50%;
}

.pack-logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    background: linear-gradient(180deg, #fff9e6 0%, #fbbf24 40%, #d97706 80%, #92400e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6));
}

.pack-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.pack-edition {
    font-size: 0.55rem;
    color: rgba(251, 191, 36, 0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Pack border glow */
.pack-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    pointer-events: none;
    z-index: 5;
}

.pack-tear-line {
    position: absolute;
    top: 0;
    right: 28px;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px, transparent 6px,
        rgba(255, 255, 255, 0.25) 6px, rgba(255, 255, 255, 0.25) 10px
    );
    z-index: 3;
}

.pack-shimmer {
    position: absolute;
    inset: 17.5% 20.5%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.2) 38%,
        rgba(255, 255, 255, 0.05) 46%,
        transparent 55%
    );
    background-size: 250% 100%;
    animation: packShimmer 4s ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
    border-radius: 12px;
}

@keyframes packShimmer {
    0% { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}

.tear-instruction {
    margin-top: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: breathe 2.5s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.tear-icon {
    font-size: 1.1rem;
    display: inline-block;
    animation: wiggle 1.5s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* Pack Tearing */
.pack-wrapper .pack-foil.tearing {
    animation: packTear 0.8s ease-in-out forwards;
    cursor: default;
}

.pack-wrapper .pack-foil::after {
    content: '';
    position: absolute;
    top: 0;
    right: 24px;
    width: 12px;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,200,100,0.6) 40%, transparent 70%);
    filter: blur(3px);
    z-index: 10;
    opacity: 0;
}

.pack-wrapper .pack-foil.tearing::after {
    opacity: 1;
    animation: tearProgress 0.8s ease-in-out forwards;
}

@keyframes tearProgress {
    0% { height: 0; top: 0; }
    100% { height: 100%; top: 0; }
}

.pack-wrapper .pack-foil.tearing .pack-tear-line {
    animation: tearLineGlow 0.8s ease-in-out forwards;
}

@keyframes tearLineGlow {
    0% {
        box-shadow: none;
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
    }
    50% {
        background: linear-gradient(180deg, rgba(255,220,100,0.9) 0%, rgba(255,255,255,0.8) 50%, rgba(255,220,100,0.9) 100%);
        box-shadow: 0 0 25px rgba(255, 220, 100, 0.9), 0 0 50px rgba(255, 200, 50, 0.5);
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    }
    100% {
        background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
        box-shadow: none;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes packTear {
    0% { transform: rotateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    30% { transform: rotateY(-3deg) scale(1.01); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    70% { transform: rotateY(5deg) scale(0.99); clip-path: polygon(0 0, 86% 0, 82% 100%, 0 100%); }
    100% { transform: rotateY(-12deg) translateX(20px); clip-path: polygon(0 0, 82% 0, 74% 100%, 0 100%); }
}

.pack-wrapper .pack-foil.torn {
    animation: packFlyAway 0.4s ease-in forwards;
}

.pack-torn-piece {
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 100%;
    background: linear-gradient(135deg, #302b63 0%, #24243e 50%, #0f0c29 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 16% 0);
    border-radius: 0 14px 14px 0;
    animation: tornPieceFly 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 5;
}

@keyframes tornPieceFly {
    0% { transform: translateX(0) rotate(0deg); opacity: 1; }
    60% { opacity: 0.6; }
    100% { transform: translateX(150px) translateY(-80px) rotate(25deg); opacity: 0; }
}

@keyframes packFlyAway {
    0% { transform: rotateY(-12deg) translateX(20px); opacity: 1; }
    100% { transform: rotateY(-25deg) translateX(-80px) translateY(30px) scale(0.7); opacity: 0; }
}

/* Screen flash for rare pulls - sits behind modal content */
.screen-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: screenFlash 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 0;
    border-radius: var(--radius-lg);
}

@keyframes screenFlash {
    0% { opacity: 0; }
    10% { opacity: 0.5; }
    30% { opacity: 0.2; }
    100% { opacity: 0; }
}

/* Overlay pulse for legendary reveals (no transform - preserves 3D flip) */
.overlay-pulse {
    animation: overlayPulse 0.5s ease-out;
}

@keyframes overlayPulse {
    0% { background: rgba(0, 0, 0, 0.8); }
    15% { background: rgba(245, 158, 11, 0.25); }
    40% { background: rgba(0, 0, 0, 0.6); }
    100% { background: rgba(0, 0, 0, 0.8); }
}

/* Sparkle burst on tear — centered at top where pack rips */
.tear-sparkles {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 22;
}

.tear-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    animation: sparkle 0.9s ease-out forwards;
}

@keyframes sparkle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ----------------------------------------
   Revealed Cards
   ---------------------------------------- */
.revealed-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: var(--space-md) var(--space-lg);
    max-width: 960px;
    margin: 0 auto;
}

.revealed-cards.hidden { display: none; }

/* Flip Card */
.flip-card {
    width: 200px;
    height: 290px;
    perspective: 1200px;
    cursor: pointer;
    container-type: inline-size;
}

.flip-card.card-enter {
    animation: cardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes cardSlideIn {
    0% { opacity: 0; transform: translateY(40px) scale(0.8); }
    50% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Anticipation wobble before epic+ reveal */
.flip-card.card-anticipation {
    animation: cardAnticipation 0.4s ease-in-out;
}

@keyframes cardAnticipation {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.06); }
    50% { transform: scale(1.08); }
    75% { transform: scale(1.05); }
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

/* Ensure card back is fully hidden once flipped */
.flip-card.flipped .flip-card-back {
    visibility: hidden;
}

/* Card Back - Premium design */
.flip-card-back {
    background: linear-gradient(145deg, #0f0d1a 0%, #1a1647 40%, #0f0d1a 100%);
    border: 2px solid rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-back-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(99, 102, 241, 0.04) 0deg 10deg, transparent 10deg 20deg);
}

.card-back-logo {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-icon {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    position: relative;
}

.card-back-icon::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(99, 102, 241, 0.5);
}

.card-back-border {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 8px;
    pointer-events: none;
}

.flip-card:not(.flipped):hover .flip-card-back {
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.5);
}

/* Card Front */
.flip-card-front {
    transform: rotateY(180deg);
    background: linear-gradient(165deg, #1e1b3a 0%, #151329 100%);
    border: 2px solid var(--color-border);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Rarity strip at top */
.card-rarity-strip {
    width: 100%;
    text-align: center;
    font-size: 4.5cqi;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2.5cqi 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.flip-card-front[data-rarity="common"] .card-rarity-strip { color: var(--rarity-common); }
.flip-card-front[data-rarity="uncommon"] .card-rarity-strip { color: var(--rarity-uncommon); }
.flip-card-front[data-rarity="rare"] .card-rarity-strip { color: var(--rarity-rare); }
.flip-card-front[data-rarity="epic"] .card-rarity-strip { color: var(--rarity-epic); }
.flip-card-front[data-rarity="legendary"] .card-rarity-strip {
    color: var(--rarity-legendary);
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
}
.flip-card-front[data-rarity="mythic"] .card-rarity-strip {
    color: var(--rarity-mythic);
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.1), transparent);
}

/* Holographic Effect */
.card-holo-effect {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(255, 0, 128, 0.12) 15%,
        rgba(0, 255, 255, 0.12) 30%,
        rgba(255, 255, 0, 0.12) 45%,
        rgba(0, 255, 128, 0.12) 60%,
        rgba(128, 0, 255, 0.12) 75%,
        transparent 100%
    );
    background-size: 400% 400%;
    animation: holoShift 6s ease infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.flip-card.flipped .card-holo-effect { opacity: 1; }

@keyframes holoShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Card Shine sweep */
.card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.35) 55%,
        transparent 60%
    );
    transform: rotate(25deg);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.flip-card.flipped .card-shine {
    animation: cardShine 1.2s ease-out 0.35s;
}

@keyframes cardShine {
    0% { opacity: 0; transform: rotate(25deg) translateX(-120%); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: rotate(25deg) translateX(120%); }
}

/* Card Face Container */
.flip-card-front .card-face-container {
    width: 42cqi;
    height: 42cqi;
    margin: 6cqi 0 3cqi;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, #1a1835 0%, #0f0d1a 100%);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.flip-card-front .card-info {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flip-card-front .agent-name {
    font-size: 6.5cqi;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 1cqi;
}

.card-type-label {
    font-size: 4.5cqi;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2cqi;
}

.card-value-tag {
    font-size: 5.5cqi;
    font-weight: 700;
    color: #fbbf24;
    font-family: var(--font-display);
    background: rgba(251, 191, 36, 0.08);
    padding: 1cqi 6cqi;
    border-radius: 20px;
    display: inline-block;
    margin: 0 auto 4cqi;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

/* Card particles container */
.card-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.card-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: particleBurst 0.8s ease-out forwards;
}

@keyframes particleBurst {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0); opacity: 0; }
}

/* Rarity-specific card borders */
.flip-card-front[data-rarity="common"] { border-color: var(--rarity-common); }
.flip-card-front[data-rarity="uncommon"] { border-color: var(--rarity-uncommon); }
.flip-card-front[data-rarity="rare"] { border-color: var(--rarity-rare); }
.flip-card-front[data-rarity="epic"] { border-color: var(--rarity-epic); }
.flip-card-front[data-rarity="legendary"] {
    border-color: var(--rarity-legendary);
    border-width: 2px;
}
.flip-card-front[data-rarity="mythic"] {
    border-color: var(--rarity-mythic);
    border-width: 2px;
}

/* Special card effects for rare+ */
.flip-card.special-card .card-holo-effect {
    opacity: 1;
    animation: holoShift 4s ease infinite;
}

.flip-card.special-card[data-rarity="rare"] .flip-card-front {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.35), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.flip-card.special-card[data-rarity="epic"] .flip-card-front {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.flip-card.special-card[data-rarity="legendary"] .flip-card-front {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.45), 0 0 60px rgba(245, 158, 11, 0.15);
    animation: legendaryGlow 2.5s ease-in-out infinite;
}

.flip-card.special-card[data-rarity="mythic"] .flip-card-front {
    box-shadow: 0 0 35px rgba(236, 72, 153, 0.5), 0 0 70px rgba(139, 92, 246, 0.2);
    animation: mythicGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.4), 0 0 50px rgba(245, 158, 11, 0.1); }
    50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.7), 0 0 80px rgba(245, 158, 11, 0.3); }
}

@keyframes mythicGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(236, 72, 153, 0.4), 0 0 50px rgba(139, 92, 246, 0.1); }
    50% { box-shadow: 0 0 45px rgba(236, 72, 153, 0.7), 0 0 80px rgba(139, 92, 246, 0.3); }
}

/* Responsive */
@media (max-width: 520px) {
    .flip-card {
        width: 140px;
        height: 200px;
    }
    .pack-wrapper .pack-foil {
        width: var(--pack-modal-width);
        height: auto;
    }
    .revealed-cards {
        gap: 10px;
        padding: var(--space-sm) var(--space-md);
    }
}

/* ============================================
   Payment Modal
   ============================================ */
#payment-modal .modal-content {
    max-width: 450px;
}

#payment-modal .modal-title {
    color: var(--rarity-legendary);
    padding: var(--space-lg);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.payment-info {
    padding: var(--space-lg);
}

.payment-summary {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.payment-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 0.9rem;
}

.payment-summary .summary-row.shortfall {
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
}

.payment-summary .price {
    color: var(--rarity-legendary);
    font-weight: 600;
}

.payment-summary .balance {
    color: var(--color-text-muted);
}

.payment-summary .shortfall-amount {
    color: #ef4444;
}

.payment-prompt {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.payment-prompt strong {
    color: var(--color-text);
}

.payment-methods-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 var(--space-lg) var(--space-lg);
}

.payment-method-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-method-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--color-accent);
    transform: translateX(4px);
}

.payment-method-btn .method-icon {
    font-size: 1.5rem;
}

.payment-method-btn .method-name {
    flex: 1;
    text-align: left;
}

#payment-modal .modal-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

#payment-modal #cancel-payment {
    min-width: 120px;
}

/* ============================================
   Purchase Confirmation Modal
   ============================================ */
#confirm-purchase-modal .confirm-modal {
    max-width: 400px;
}

#confirm-purchase-modal .confirm-content {
    padding: var(--space-lg);
}

#confirm-purchase-modal .confirm-agent-preview {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

#confirm-purchase-modal .confirm-agent-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: none;
    border-radius: 0;
    border: none;
}

#confirm-purchase-modal .confirm-agent-card[data-rarity="common"] {
    border-color: var(--rarity-common);
}
#confirm-purchase-modal .confirm-agent-card[data-rarity="uncommon"] {
    border-color: var(--rarity-uncommon);
}
#confirm-purchase-modal .confirm-agent-card[data-rarity="rare"] {
    border-color: var(--rarity-rare);
}
#confirm-purchase-modal .confirm-agent-card[data-rarity="epic"] {
    border-color: var(--rarity-epic);
}
#confirm-purchase-modal .confirm-agent-card[data-rarity="legendary"] {
    border-color: var(--rarity-legendary);
}
#confirm-purchase-modal .confirm-agent-card[data-rarity="mythic"] {
    border-color: var(--rarity-mythic);
}

#confirm-purchase-modal .confirm-agent-card .face-canvas {
    border-radius: 50%;
    background: var(--color-bg-secondary);
}

#confirm-purchase-modal .confirm-agent-info h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
}

#confirm-purchase-modal .confirm-agent-info .agent-type {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: var(--space-xs);
}

#confirm-purchase-modal .confirm-details {
    background: var(--color-bg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

#confirm-purchase-modal .confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

#confirm-purchase-modal .confirm-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent);
}

#confirm-purchase-modal .confirm-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

#confirm-purchase-modal .quantity-selector {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

#confirm-purchase-modal .quantity-selector label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    font-weight: 500;
}

#confirm-purchase-modal .quantity-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

#confirm-purchase-modal .qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#confirm-purchase-modal .qty-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

#confirm-purchase-modal .qty-btn:active {
    transform: scale(0.95);
}

#confirm-purchase-modal .qty-input {
    width: 60px;
    height: 36px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-md);
    -moz-appearance: textfield;
}

#confirm-purchase-modal .qty-input::-webkit-outer-spin-button,
#confirm-purchase-modal .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#confirm-purchase-modal .qty-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

#confirm-purchase-modal .available-note {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

#confirm-purchase-modal .total-row {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-border);
}

#confirm-purchase-modal .total-row .confirm-price {
    font-size: 1.4rem;
}

#confirm-purchase-modal .confirm-question {
    text-align: center;
    color: var(--color-text);
    font-size: 0.95rem;
}

#confirm-purchase-modal .modal-footer {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
}

#confirm-purchase-modal .modal-footer .btn {
    min-width: 140px;
}

#confirm-purchase-modal #confirm-purchase {
    background: linear-gradient(135deg, var(--color-accent), #4f46e5);
}

#confirm-purchase-modal #confirm-purchase:hover {
    background: linear-gradient(135deg, var(--color-accent-hover), #6366f1);
    transform: translateY(-1px);
}

/* ============================================
   Pack Confirmation Modal
   ============================================ */
#confirm-pack-modal .confirm-modal {
    max-width: 420px;
}

#confirm-pack-modal .confirm-content {
    padding: var(--space-lg);
}

#confirm-pack-modal .confirm-pack-preview {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

#confirm-pack-modal .confirm-pack-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
    background: none;
    border-radius: 0;
    border: none;
}

#confirm-pack-modal .confirm-pack-card .pack-icon {
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-accent), #4f46e5);
    border-radius: var(--radius-md);
    position: relative;
}

#confirm-pack-modal .confirm-pack-card .pack-icon::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    font-weight: bold;
}

#confirm-pack-modal .confirm-pack-info h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
}

#confirm-pack-modal .confirm-pack-info .pack-description {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
}

#confirm-pack-modal .pack-details {
    display: flex;
    gap: var(--space-sm);
    font-size: 0.8rem;
}

#confirm-pack-modal .pack-cards-count {
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

#confirm-pack-modal .pack-guaranteed {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

#confirm-pack-modal .confirm-details {
    background: var(--color-bg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

#confirm-pack-modal .confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#confirm-pack-modal .confirm-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent);
}

#confirm-pack-modal .confirm-question {
    text-align: center;
    color: var(--color-text);
    font-size: 0.95rem;
}

#confirm-pack-modal .modal-footer {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
}

#confirm-pack-modal .modal-footer .btn {
    min-width: 140px;
}

#confirm-pack-modal #confirm-pack {
    background: linear-gradient(135deg, var(--color-accent), #4f46e5);
}

#confirm-pack-modal #confirm-pack:hover {
    background: linear-gradient(135deg, var(--color-accent-hover), #6366f1);
    transform: translateY(-1px);
}

/* ============================================
   Footer
   ============================================ */
.main-footer {
    padding: var(--space-xl);
    text-align: center;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-3xl);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.main-footer p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ============================================
   Animations
   ============================================ */
@keyframes rainbow-shift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
    50% { transform: translateY(-20px) rotate(var(--rotation, 0deg)); }
}

@keyframes holographic {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes packShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes cardReveal {
    from { transform: scale(0) rotateY(180deg); opacity: 0; }
    to { transform: scale(1) rotateY(0deg); opacity: 1; }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-visual {
        height: 380px;
    }

    .floating-card {
        width: 220px;
    }

    .floating-cards {
        width: 220px;
        height: 293px;
    }

    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .main-header {
        padding: var(--space-sm) var(--space-md);
    }

    .header-container {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .main-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: var(--space-sm);
    }

    .nav-link {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.875rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .tab-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select,
    .filter-input {
        width: 100%;
    }

    .agents-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .balance-display {
        display: none;
    }

    .floating-cards {
        display: none;
    }

    .hero-visual {
        display: none;
    }

    .agents-grid,
    .owned-agents-grid {
        grid-template-columns: 1fr;
    }

    .stats-panel {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ============================================
   Pack Value Dropdown (hover ? button)
   ============================================ */
#pack-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pack-value-dropdown {
    position: relative;
}

.value-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

.value-info-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.25);
}

.value-dropdown-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    z-index: 10;
    animation: dropdownReveal 0.2s ease forwards;
}

@keyframes dropdownReveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.value-dropdown-content::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 12px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.pack-value-dropdown:hover .value-dropdown-content {
    display: block;
}

.value-dropdown-content.profit {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(10, 30, 20, 0.95));
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.value-dropdown-content.profit::after {
    background: rgba(10, 30, 20, 0.95);
    border-right: 1px solid rgba(16, 185, 129, 0.3);
    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.value-dropdown-content.loss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(30, 10, 10, 0.95));
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.value-dropdown-content.loss::after {
    background: rgba(30, 10, 10, 0.95);
    border-right: 1px solid rgba(239, 68, 68, 0.3);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

.value-summary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.value-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.value-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.value-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-display);
}

.value-summary-arrow {
    font-size: 0.8rem;
    opacity: 0.5;
}

.profit .value-summary-arrow { color: #10b981; }
.loss .value-summary-arrow { color: #ef4444; }

.value-result-row {
    text-align: center;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.value-result-amount {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-display);
}

.profit .value-result-amount { color: #10b981; }
.loss .value-result-amount { color: #ef4444; }

.value-result-pct {
    font-size: 0.65rem;
    opacity: 0.6;
}

.profit .value-result-pct { color: #10b981; }
.loss .value-result-pct { color: #ef4444; }

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-border: #666;
        --color-text-muted: #ccc;
    }
}

/* ============================================
   Conquest Shape System
   ============================================ */
.conquest-draw-active #world-canvas { cursor: crosshair !important; }

.shape-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.shape-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.shape-card:hover {
    border-color: rgba(255, 165, 0, 0.5);
}

.shape-card.selected {
    border-color: #ff9900;
    background: rgba(255, 165, 0, 0.15);
}

#shape-config label {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    color: #ccc;
}

#shape-config input[type="range"] {
    width: 100%;
    accent-color: #ff9900;
}

/* ============================================
   CARD STANDARD — Reference for ALL card rendering
   ============================================

   RULES:
   1. NO CONTAINERS. The card image IS the card. Never wrap in a
      div with background, border, box-shadow, or overflow:hidden.
   2. border-radius: 12px on the <img> itself (and matching overlays).
   3. Glow via filter: drop-shadow() — NEVER box-shadow (makes rectangles).
   4. container-type: inline-size on the card wrapper so text uses cqi units.
   5. perspective: 800px + transform-style: preserve-3d on wrapper for 3D tilt.
   6. Float text at translate3d(0,0,30px) with parallax via JS mousemove.
   7. All text sizes use clamp() with cqi middle value for linear scaling.

   HTML TEMPLATE (copy for any new page):
   ─────────────────────────────────────────
   <div class="card-art-mode" data-rarity="RARITY_CLASS">
       <img class="card-art-img" src="PATH.webp" alt="NAME" draggable="false">
       <div class="card-holographic"></div>
       <div class="card-float-text" style="transform-style:preserve-3d">
           <span class="float-name">CARD NAME</span>
           <span class="float-type">TYPE</span>
           <span class="float-ability">ABILITY</span>
           <span class="float-desc">DESCRIPTION</span>
           <div class="float-stats">
               <span class="float-stat">ATK ##</span>
               <span class="float-stat">DEF ##</span>
               <span class="float-stat">GTH ##</span>
           </div>
       </div>
   </div>

   JS: Call initCardTilt(containerElement) on the parent grid/container.
       This adds mousemove parallax, holographic tracking, and tilt.

   RARITY CLASSES: common, uncommon, rare, epic, legendary, mythic, demonic

   TEXT SIZES (cqi = scales linearly with card width):
     .float-name:    clamp(0.55rem, 5.6cqi, 1.65rem)   Cinzel 700
     .float-type:    clamp(0.4rem,  3.6cqi, 1.05rem)   Rajdhani 600
     .float-ability: clamp(0.5rem,  4.8cqi, 1.5rem)    Rajdhani 700
     .float-desc:    clamp(0.4rem,  3.6cqi, 1.08rem)   Rajdhani 500
     .float-stat:    clamp(0.42rem, 4cqi,   1.2rem)    Rajdhani 700

   PARALLAX (JS — handled by initCardTilt):
     Card tilt: perspective(600px) rotateX/Y ±12deg
     Text shift: translate3d(±6px, ±4px, 30px) opposite to tilt
     Holographic: background-position follows cursor %

   BORDER-RADIUS: 12px on .card-art-img, .card-holographic,
     .card-art-bottom (0 0 12px 12px), .floating-card-img,
     .pack-foil-img, .pack-anim-img, holographic sweep ::after

   TEXT AUTO-FIT: Never truncate or clip text. If text doesn't fit,
     ALL text on the card shrinks at the same rate.
     - No overflow:hidden, no text-overflow:ellipsis, no -webkit-line-clamp
     - JS: autoFitCardText(container) measures and scales uniformly
     - Call after rendering any cards: autoFitCardText(gridElement)
     - Min scale: 0.6x (won't shrink below 60% of base size)

   ============================================ */

/* The card itself: exact 3:4 container, image fills everything */
.agent-card.card-art-mode,
.agent-card.card-art-mode[data-rarity="common"],
.agent-card.card-art-mode[data-rarity="uncommon"],
.agent-card.card-art-mode[data-rarity="rare"],
.agent-card.card-art-mode[data-rarity="epic"],
.agent-card.card-art-mode[data-rarity="legendary"],
.agent-card.card-art-mode[data-rarity="mythic"],
.agent-card.card-art-mode[data-rarity="demonic"],
.agent-card.card-art-mode[data-rarity="holy"],
.owned-agent-card.card-art-mode {
    padding: 0;
    position: relative;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    aspect-ratio: 3 / 4;
    box-shadow: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.agent-card.card-art-mode::before,
.owned-agent-card.card-art-mode::before {
    display: none;
}

/* Mythic aura on art-mode cards (uses ::before since ::after = sold-out banner) */
.agent-card.card-art-mode[data-rarity="mythic"]::before,
.owned-agent-card.card-art-mode[data-rarity="mythic"]::before {
    display: block;
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(236, 72, 153, 0.7),
        rgba(168, 85, 247, 0.7),
        rgba(59, 130, 246, 0.5),
        rgba(16, 185, 129, 0.5),
        rgba(245, 158, 11, 0.6),
        rgba(236, 72, 153, 0.7)
    );
    z-index: -1;
    animation: mythic-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
    pointer-events: none;
}

.agent-card.card-art-mode[data-rarity="mythic"]:hover::before,
.owned-agent-card.card-art-mode[data-rarity="mythic"]:hover::before {
    opacity: 1;
    filter: blur(12px);
    inset: -8px;
}

/* Demonic aura on art-mode cards */
.agent-card.card-art-mode[data-rarity="demonic"]::before,
.owned-agent-card.card-art-mode[data-rarity="demonic"]::before {
    display: block;
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(139, 0, 0, 0.9),
        rgba(50, 0, 0, 0.7),
        rgba(180, 0, 0, 0.5),
        rgba(0, 0, 0, 0.8),
        rgba(120, 0, 0, 0.6),
        rgba(139, 0, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 3s linear infinite;
    filter: blur(10px);
    opacity: 0.85;
    pointer-events: none;
}

.agent-card.card-art-mode[data-rarity="demonic"]:hover::before,
.owned-agent-card.card-art-mode[data-rarity="demonic"]:hover::before {
    opacity: 1;
    filter: blur(16px);
    inset: -12px;
}

/* Holy aura on art-mode cards */
.agent-card.card-art-mode[data-rarity="holy"]::before,
.owned-agent-card.card-art-mode[data-rarity="holy"]::before {
    display: block;
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(
        from var(--mythic-angle, 0deg),
        rgba(255, 215, 0, 0.9),
        rgba(255, 248, 220, 0.7),
        rgba(218, 165, 32, 0.6),
        rgba(255, 255, 255, 0.8),
        rgba(255, 223, 0, 0.7),
        rgba(255, 215, 0, 0.9)
    );
    z-index: -1;
    animation: mythic-rotate 5s linear infinite;
    filter: blur(12px);
    opacity: 0.8;
    pointer-events: none;
}

.agent-card.card-art-mode[data-rarity="holy"]:hover::before,
.owned-agent-card.card-art-mode[data-rarity="holy"]:hover::before {
    opacity: 1;
    filter: blur(18px);
    inset: -14px;
}

/* Override rarity hover borders/shadows for art mode */
.agent-card.card-art-mode[data-rarity="common"]:hover,
.agent-card.card-art-mode[data-rarity="uncommon"]:hover,
.agent-card.card-art-mode[data-rarity="rare"]:hover,
.agent-card.card-art-mode[data-rarity="epic"]:hover,
.agent-card.card-art-mode[data-rarity="legendary"]:hover,
.agent-card.card-art-mode[data-rarity="mythic"]:hover,
.agent-card.card-art-mode[data-rarity="demonic"]:hover,
.agent-card.card-art-mode[data-rarity="holy"]:hover {
    border: none;
}

/* The card image - fills the card */
.card-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    border-radius: 12px;
}

/* Holographic shimmer sits on top of the image */
.card-art-mode .card-holographic {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.35;
    overflow: hidden;
    border-radius: 12px;
}

/* Rarity-colored glow on hover */
.agent-card.card-art-mode:hover {
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px var(--card-glow, rgba(255, 255, 255, 0.15)));
}

.agent-card.card-art-mode[data-rarity="common"] { --card-glow: rgba(156, 163, 175, 0.2); }
.agent-card.card-art-mode[data-rarity="uncommon"] { --card-glow: rgba(16, 185, 129, 0.25); }
.agent-card.card-art-mode[data-rarity="rare"] { --card-glow: rgba(59, 130, 246, 0.3); }
.agent-card.card-art-mode[data-rarity="epic"] { --card-glow: rgba(139, 92, 246, 0.35); }
.agent-card.card-art-mode[data-rarity="legendary"] { --card-glow: rgba(245, 158, 11, 0.4); }
.agent-card.card-art-mode[data-rarity="mythic"] { --card-glow: rgba(236, 72, 153, 0.45); }
.agent-card.card-art-mode[data-rarity="demonic"] { --card-glow: rgba(139, 0, 0, 0.6); }
.agent-card.card-art-mode[data-rarity="holy"] { --card-glow: rgba(255, 215, 0, 0.6); }

/* ? Info button - floats over the card image, unaffected by tilt */
.btn-card-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    z-index: 25;
    transform-style: flat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
}

.agent-card.card-art-mode:hover .btn-card-info {
    opacity: 1;
}

.btn-card-info:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* ---- Floating 3D Text Layer ---- */
/* The text hovers above the card surface in 3D space */
.card-float-text {
    position: absolute;
    inset: -8px;
    z-index: 26;
    pointer-events: none;
    transform: translate3d(0, 0, 30px);
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

/* Card name - top thin banner */
.float-name {
    position: absolute;
    top: 5.5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(0.55rem, 5.6cqi, 1.65rem);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 5px 10px rgba(0, 0, 0, 0.7),
        0 10px 20px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    max-width: 90%;
}

/* --- Everything below lives in the bottom third (67-97%) --- */

/* Type - top of bottom third */
.float-type {
    position: absolute;
    top: 69%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 600;
    font-size: clamp(0.4rem, 3.6cqi, 1.05rem);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 5px 10px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Ability name - centered in bottom third */
.float-ability {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(0.5rem, 4.8cqi, 1.5rem);
    color: #fff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 6px 12px rgba(0, 0, 0, 0.6),
        0 10px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Description - below ability */
.float-desc {
    position: absolute;
    top: 82%;
    left: 12%;
    right: 12%;
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 500;
    font-size: clamp(0.4rem, 3.6cqi, 1.08rem);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    line-height: 1.35;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Stats row - bottom of the bottom third */
.float-stats {
    position: absolute;
    top: 91%;
    left: 12%;
    right: 12%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.float-stat {
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(0.42rem, 4cqi, 1.2rem);
    color: #fff;
    letter-spacing: 0.05em;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 5px 10px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Ensure card has perspective for 3D text float + container queries for cqi units */
.agent-card.card-art-mode,
.owned-agent-card.card-art-mode {
    perspective: 800px;
    transform-style: preserve-3d;
    overflow: visible !important;
    clip-path: none !important;
    container-type: inline-size;
}

/* Cinzel + Rajdhani fonts loaded via <link> in header.php */

/* Standalone card-art-mode: works outside marketplace grids (homepage, auth, etc.) */
.card-art-mode {
    position: relative;
    aspect-ratio: 3 / 4;
    container-type: inline-size;
    perspective: 800px;
    transform-style: preserve-3d;
    overflow: visible;
    transition: transform 0.15s ease-out;
}

/* Standalone holographic rarity overrides */
.card-art-mode[data-rarity="legendary"] .card-holographic,
.card-art-mode[data-rarity="mythic"] .card-holographic,
.card-art-mode[data-rarity="demonic"] .card-holographic {
    opacity: 1;
    animation: holographic-rainbow 4s ease-in-out infinite;
    background:
        linear-gradient(125deg, transparent 0%, rgba(255, 50, 50, 0.1) 10%, rgba(255, 180, 0, 0.14) 20%,
            rgba(220, 240, 50, 0.12) 30%, rgba(50, 240, 80, 0.12) 40%, rgba(50, 200, 255, 0.12) 50%,
            rgba(100, 80, 255, 0.12) 60%, rgba(200, 50, 255, 0.1) 70%, transparent 100%);
    background-size: 200% 200%;
}

.card-art-mode[data-rarity="demonic"] .card-holographic {
    background:
        linear-gradient(125deg, transparent 0%, rgba(139, 0, 0, 0.15) 20%, rgba(80, 0, 0, 0.12) 40%,
            rgba(200, 0, 0, 0.1) 60%, rgba(50, 0, 0, 0.15) 80%, transparent 100%);
    background-size: 200% 200%;
}

.card-art-mode[data-rarity="mythic"] .card-holographic {
    background:
        linear-gradient(125deg, transparent 0%, rgba(255, 50, 100, 0.15) 10%, rgba(255, 200, 0, 0.18) 20%,
            rgba(100, 255, 100, 0.16) 35%, rgba(50, 200, 255, 0.18) 50%, rgba(150, 50, 255, 0.16) 65%,
            rgba(255, 50, 200, 0.15) 80%, transparent 100%);
    background-size: 200% 200%;
}

/* Standalone mythic aura */
.card-art-mode[data-rarity="mythic"]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: conic-gradient(from var(--mythic-angle, 0deg),
        rgba(236, 72, 153, 0.7), rgba(168, 85, 247, 0.7), rgba(59, 130, 246, 0.5),
        rgba(16, 185, 129, 0.5), rgba(245, 158, 11, 0.6), rgba(236, 72, 153, 0.7));
    z-index: -1;
    animation: mythic-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
    pointer-events: none;
}

/* Standalone demonic aura */
.card-art-mode[data-rarity="demonic"]::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: conic-gradient(from var(--mythic-angle, 0deg),
        rgba(139, 0, 0, 0.9), rgba(50, 0, 0, 0.7), rgba(180, 0, 0, 0.5),
        rgba(0, 0, 0, 0.8), rgba(120, 0, 0, 0.6), rgba(139, 0, 0, 0.9));
    z-index: -1;
    animation: mythic-rotate 3s linear infinite;
    filter: blur(10px);
    opacity: 0.85;
    pointer-events: none;
}

/* Supply badge on art cards */
.card-art-supply {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
}

/* Marketplace card wrapper — holds card + independent buy bar */
.card-market-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    container-type: inline-size;
}

/* Buy bar — sits below the card, never tilts */
.card-buy-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.card-market-wrap:hover .card-buy-bar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.card-buy-bar.sold-out {
    opacity: 0.6;
}

.card-buy-bar .btn-card-info {
    position: static;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.15s ease;
    padding: 0;
}

.card-buy-bar .btn-card-info:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    transform: scale(1.1);
}

.card-buy-bar .quantity-remaining {
    position: static;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.card-buy-bar .quantity-remaining.depleted {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.card-buy-bar .agent-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-left: auto;
}

.card-buy-bar .btn-buy {
    padding: 5px 14px;
    font-size: 0.78rem;
}

/* Legacy overlay buy bar — still used by wallet cards */
.card-art-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    border-radius: 0 0 12px 12px;
    z-index: 25;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-style: flat;
}

.agent-card.card-art-mode:hover .card-art-bottom {
    opacity: 1;
    transform: translateY(0);
}

.card-art-bottom .agent-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.card-art-bottom .btn-buy {
    padding: 5px 16px;
    font-size: 0.8rem;
}

/* Wallet art cards */
.owned-agent-card.card-art-mode .quantity-badge {
    z-index: 10;
}

.owned-agent-card.card-art-mode .card-art-bottom {
    opacity: 0;
    transform: translateY(4px);
    padding: 8px 12px;
    justify-content: center;
}

.owned-agent-card.card-art-mode:hover .card-art-bottom {
    opacity: 1;
    transform: translateY(0);
}

.owned-agent-card.card-art-mode .card-art-bottom .card-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ddd;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.btn-verify-agent {
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #c7d2fe;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.btn-verify-agent:hover {
    background: rgba(99, 102, 241, 0.5);
    color: #fff;
}

/* Limited footer with hash + verify in wallet — always visible */
.card-art-bottom.limited-footer {
    opacity: 1;
    transform: none;
    justify-content: space-between;
    padding: 8px 10px;
    gap: 6px;
}

.owned-agent-card.card-art-mode .card-art-bottom.limited-footer {
    opacity: 1;
    transform: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
}

/* Pack reveal - image fills the flip card front */
.flip-card-front.card-art-front {
    padding: 0;
    overflow: visible;
    perspective: 800px;
    transform-style: preserve-3d;
}

.pack-reveal-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Floating text on pack reveal cards */
.flip-card-front.card-art-front .card-float-text {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    transform: translate3d(0, 0, 30px);
    transform-style: preserve-3d;
}

/* ============================================
   Card Info Modal
   ============================================ */
.card-info-modal-content {
    max-width: 480px;
    width: 90%;
}

.card-info-header {
    text-align: center;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-info-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-info-header[data-rarity="legendary"] .card-info-name {
    background: linear-gradient(135deg, #F59E0B, #FCD34D, #F59E0B);
    -webkit-background-clip: text;
    background-clip: text;
}

.card-info-header[data-rarity="mythic"] .card-info-name {
    background: linear-gradient(135deg, #EC4899, #F472B6, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
}

.card-info-header[data-rarity="epic"] .card-info-name {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA, #8B5CF6);
    -webkit-background-clip: text;
    background-clip: text;
}

.card-info-badges {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.type-badge {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stats grid */
.card-info-stats-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card-info-stat {
    display: grid;
    grid-template-columns: 30px 70px 40px 1fr;
    align-items: center;
    gap: var(--space-xs);
}

.card-info-stat-icon {
    font-size: 1.2rem;
    text-align: center;
}

.card-info-stat-label {
    font-size: 0.85rem;
    color: #999;
}

.card-info-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.card-info-stat-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.card-info-stat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.card-info-stat-fill.attack {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.card-info-stat-fill.defense {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.card-info-stat-fill.gather {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* World stats in info modal */
.card-info-world-stats {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-info-world-stats h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: var(--space-xs);
}

.card-info-world-row {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

/* Ability section */
.card-info-ability {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.08);
    border-radius: var(--radius-md);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.card-info-ability h4 {
    font-size: 0.95rem;
    color: #a78bfa;
    margin-bottom: 4px;
}

.card-info-ability .ability-benefit {
    font-size: 0.85rem;
    color: #10b981;
    font-weight: 600;
}

.card-info-ability .ability-desc {
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
    line-height: 1.4;
}

.card-info-ability .ability-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.card-info-ability .ability-bonus {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.card-info-ability .ability-bonus.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.card-info-ability .ability-bonus.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Description */
.card-info-desc {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    line-height: 1.5;
}

/* Supply info */
.card-info-supply {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(245, 158, 11, 0.08);
    border-radius: var(--radius-md);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.supply-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #F59E0B;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.supply-count {
    font-size: 0.85rem;
    color: #ccc;
}

/* Price row */
.card-info-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-info-price {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-info-price-row .btn-buy {
    padding: 8px 24px;
    font-size: 0.95rem;
}

/* ============================================
   Limited Edition & Serial Badges
   ============================================ */

/* Serial badge — sits above the verify footer, unaffected by tilt */
.serial-badge {
    display: inline-block;
    width: fit-content;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #000;
    z-index: 26;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    max-width: 100%;
}

/* Card value badge — wallet cards */
.card-value-badge {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    color: #34d399;
    letter-spacing: 0.3px;
    white-space: nowrap;
    z-index: 26;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

/* Value inside card-art-bottom (art cards) */
.card-art-bottom .card-value-badge {
    margin-right: auto;
}

/* Value as overlay badge (sprite cards) */
.card-value-badge.sprite-value {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Card hash display */
.card-hash {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    cursor: default;
}

/* Verify button */
.btn-verify {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-verify:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Limited footer with hash + verify */
.limited-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================
   Verify Modal
   ============================================ */
.verify-modal-content {
    max-width: 440px;
    width: 90%;
    border-radius: 16px;
}

.verify-loading {
    text-align: center;
    padding: var(--space-xl);
}

.verify-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.verify-header {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.verify-header.authentic {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.verify-header.invalid {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.verify-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.verify-header.authentic .verify-icon {
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.25);
}

.verify-header.invalid .verify-icon {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.25);
}

.verify-header h2 {
    font-size: 1.2rem;
    letter-spacing: 3px;
    font-weight: 700;
}

.verify-header.authentic h2 {
    color: #10b981;
}

.verify-header.invalid h2 {
    color: #ef4444;
}

.verify-card-info {
    text-align: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.verify-card-info h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-xs);
    color: #fff;
}

.verify-serial {
    font-size: 1rem;
    font-weight: 700;
    margin-top: var(--space-sm);
    color: #F59E0B;
}

.verify-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.verify-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.verify-label {
    font-size: 0.85rem;
    color: #888;
}

.verify-value {
    font-size: 0.85rem;
    color: #ccc;
}

.verify-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.verify-status.valid {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.verify-status.invalid {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.verify-hash-display {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.verify-hash-display .verify-label {
    display: block;
    margin-bottom: var(--space-xs);
}

.verify-hash-value {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.verify-hash-value code {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #aaa;
    word-break: break-all;
    flex: 1;
}

.btn-copy-hash {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-copy-hash:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.verify-error {
    text-align: center;
    padding: var(--space-xl);
    color: #ef4444;
}

/* ============================================
   CARD FLOAT VALUES + CBG GRADING SYSTEM
   ============================================ */

/* --- Grading Section on Wallet Page --- */
.grading-section {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
}

.grading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.grading-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #f0f0f0;
}

.grading-price {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.grading-description {
    color: #9CA3AF;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.grading-wear-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wear-chip {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
}

.wear-chip[data-wear="perfect"] { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.wear-chip[data-wear="imperfect"] { background: rgba(59,130,246,0.15); color: #3b82f6; border-color: rgba(59,130,246,0.3); }
.wear-chip[data-wear="worn"] { background: rgba(234,179,8,0.15); color: #eab308; border-color: rgba(234,179,8,0.3); }
.wear-chip[data-wear="damaged"] { background: rgba(249,115,22,0.15); color: #f97316; border-color: rgba(249,115,22,0.3); }
.wear-chip[data-wear="destroyed"] { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* --- Card Instance Wrapper (separates card from buttons) --- */
.card-instance-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #ccc;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-action:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

/* Inspect "?" button */
.btn-inspect {
    min-width: 28px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #f59e0b;
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.08);
}

.btn-inspect:hover {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.5);
}

/* Grade button in action bar */
.card-actions .btn-grade {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
}

.card-actions .btn-grade:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: scale(1.05);
}

/* Verify button in action bar */
.card-actions .btn-verify {
    color: #3b82f6;
    border-color: rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.08);
}

.card-actions .btn-verify:hover {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.5);
}

/* Graded card case wrapper uses same wrapper */
.card-instance-wrapper .graded-card-case {
    flex: 1;
}

/* --- Float Value Badge (shown on graded cards only) --- */
.float-value-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    color: #ccc;
    z-index: 10;
    line-height: 1.4;
    white-space: nowrap;
}

.float-value-badge .wear-label {
    display: block;
    font-size: 0.6rem;
    opacity: 0.8;
}

.float-value-badge[data-wear="perfect"] { color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
.float-value-badge[data-wear="imperfect"] { color: #3b82f6; border: 1px solid rgba(59,130,246,0.4); }
.float-value-badge[data-wear="worn"] { color: #eab308; border: 1px solid rgba(234,179,8,0.4); }
.float-value-badge[data-wear="damaged"] { color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
.float-value-badge[data-wear="destroyed"] { color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }

/* Serial Premium Indicators */
.serial-premium {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.serial-premium-tag {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-size: 0.5rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Serial Premium Badge (shown under card in wallet) */
.serial-premium-badge {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.1));
    border: 1px solid rgba(245,158,11,0.3);
    color: #f59e0b;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Grade Button --- */
.btn-grade {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-grade:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: scale(1.05);
}

/* Disabled "Graded" button for already-graded cards */
.btn-graded {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: default;
    opacity: 0.8;
    white-space: nowrap;
}

/* --- Graded Card Case (Square Acrylic Slab) --- */
.graded-card-case {
    position: relative;
    container-type: inline-size;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.02) 50%,
        rgba(255,255,255,0.01) 100%
    );
    border: 2px solid rgba(180,160,120,0.25);
    border-radius: 0;
    padding: 12px 12px 8px;
    box-shadow:
        0 0 20px rgba(0,0,0,0.4),
        inset 0 0 30px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transform-style: flat;
    transition: transform 0.15s ease-out;
    cursor: pointer;
    will-change: transform;
}

/* Subtle glass sheen (pseudo-element) */
.graded-card-case::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.04) 0%,
        transparent 30%,
        transparent 70%,
        rgba(255,255,255,0.02) 100%
    );
    pointer-events: none;
    z-index: 15;
}

/* Glass overlay div — sits on top of card in DOM, traps card behind it */
.case-glass {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
}

/* Cursor-following shimmer overlay */
.case-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: overlay;
}

/* --- Gold corner bolts --- */
.case-bolt {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #fde68a 0%,
        #f59e0b 30%,
        #b45309 70%,
        #78350f 100%
    );
    box-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.4);
    z-index: 10;
}
/* Phillips head screw cross */
.case-bolt::before,
.case-bolt::after {
    content: '';
    position: absolute;
    background: rgba(120,53,15,0.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.case-bolt::before {
    width: 6px;
    height: 1.5px;
}
.case-bolt::after {
    width: 1.5px;
    height: 6px;
}
.case-bolt-tl { top: 6px; left: 6px; }
.case-bolt-tr { top: 6px; right: 6px; }
.case-bolt-bl { bottom: 6px; left: 6px; }
.case-bolt-br { bottom: 6px; right: 6px; }

/* --- Paper label at top of case --- */
.case-label {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #f5f0e6 0%, #ede6d6 100%);
    border: 1px solid rgba(180,160,120,0.4);
    padding: 6px 10px;
    margin: 0 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.case-label-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.case-label-name {
    font-family: 'Courier New', 'Courier', monospace;
    font-weight: 700;
    font-size: 0.72rem;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.case-label-details {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.58rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
}

/* CBG Grade Badge on label */
.cbg-grade-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.1;
    flex-shrink: 0;
}

.cbg-grade-badge .cbg-label {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cbg-grade-badge .cbg-score {
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Courier New', 'Courier', monospace;
}

/* Grade color coding */
.cbg-grade-badge.grade-gold { border-color: #d4a017; color: #b8860b; }
.cbg-grade-badge.grade-green { border-color: #16a34a; color: #15803d; }
.cbg-grade-badge.grade-blue { border-color: #2563eb; color: #1d4ed8; }
.cbg-grade-badge.grade-orange { border-color: #ea580c; color: #c2410c; }
.cbg-grade-badge.grade-red { border-color: #dc2626; color: #b91c1c; }

/* Card inside case — flattened, no 3D transforms allowed */
.graded-card-case .owned-agent-card {
    margin: 0;
    position: relative;
    transform: none;
    transform-style: flat !important;
    perspective: none !important;
    overflow: hidden !important;
}
.graded-card-case .card-float-text {
    transform: none !important;
    transform-style: flat !important;
}

/* Rarity-colored bottom bar + estimated value */
.case-bottom-bar {
    position: relative;
    margin: 6px -12px -8px;
}

.case-rarity-bar {
    height: 3px;
    border-radius: 0;
}

.case-est-value {
    display: block;
    text-align: center;
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    padding: 4px 0 0;
    letter-spacing: 0.02em;
}

/* --- Grade Confirmation Modal --- */
.grade-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.grade-confirm-content {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: var(--space-lg);
    max-width: 380px;
    width: 90%;
    text-align: center;
}

.grade-confirm-content h3 {
    font-family: 'Cinzel', serif;
    margin-bottom: var(--space-sm);
    color: #f0f0f0;
}

.grade-confirm-info {
    margin: var(--space-md) 0;
    padding: var(--space-sm);
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #9CA3AF;
}

.grade-confirm-info .grade-preview {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Rajdhani', monospace;
    margin-top: 4px;
}

.grade-confirm-cost {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f59e0b;
    margin: var(--space-sm) 0;
}

.grade-confirm-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
}

.grade-confirm-actions .btn {
    min-width: 100px;
}

/* --- Pack Reveal Float Badge --- */
.pack-reveal-float {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
}

.pack-reveal-float[data-wear="perfect"] { color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
.pack-reveal-float[data-wear="imperfect"] { color: #3b82f6; border: 1px solid rgba(59,130,246,0.4); }
.pack-reveal-float[data-wear="worn"] { color: #eab308; border: 1px solid rgba(234,179,8,0.4); }
.pack-reveal-float[data-wear="damaged"] { color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
.pack-reveal-float[data-wear="destroyed"] { color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }

/* ============================================
   Card Lightbox / Enlarge Modal
   ============================================ */
.card-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.card-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.card-lightbox-content {
    position: relative;
    z-index: 1;
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.card-lightbox.active .card-lightbox-content {
    transform: scale(1);
}

.card-lightbox-card {
    width: 340px;
    max-height: 80vh;
}

.card-lightbox-card .owned-agent-card {
    width: 100%;
}

.card-lightbox-card .graded-card-case {
    width: 100%;
}

/* Non-graded cards get the fixed lightbox width */
.card-lightbox-card > .owned-agent-card.card-art-mode {
    width: 340px;
}

/* Cards inside graded cases should fill the case content area */
.card-lightbox-card .graded-card-case .owned-agent-card.card-art-mode {
    width: 100%;
}

.card-lightbox-card .card-art-bottom.limited-footer {
    opacity: 1;
    transform: none;
}

.card-lightbox-close {
    position: absolute;
    top: -40px;
    right: -10px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.card-lightbox-close:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
    .card-lightbox-card {
        width: 280px;
    }
    .card-lightbox-card .owned-agent-card.card-art-mode {
        width: 280px;
    }
}

/* ============================================
   Enhanced Inspect Modal - Value Breakdown
   ============================================ */
.inspect-value-breakdown {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.inspect-value-breakdown h4 {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: #ccc;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.value-factor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.8rem;
}

.value-factor-label {
    color: #999;
}

.value-factor-value {
    font-weight: 700;
    font-family: var(--font-display);
}

.value-factor-value.positive {
    color: #22c55e;
}

.value-factor-value.neutral {
    color: #eab308;
}

.value-factor-value.negative {
    color: #ef4444;
}

.inspect-serial-premium {
    margin-top: 0.5rem;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(217,119,6,0.08));
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    color: #f59e0b;
    font-size: 0.78rem;
    font-weight: 600;
}

.inspect-serial-premium .premium-reason {
    font-weight: 400;
    color: #ccc;
    font-size: 0.72rem;
    display: block;
    margin-top: 2px;
}