/**
 * TCG.directory Design System
 * Integrating Outfit, Plus Jakarta Sans, Space Grotesk, JetBrains Mono & Authentic Card Aesthetics
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');
@import url('cards.bundle.css');

:root {
    color-scheme: light only;
    /* Flashy, Modern & Accessible TCG Typography */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Continuous Squircle Radii (Collector Design Standard) */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* High-Energy Emotional TCG Accents */
    --color-gold: #f59e0b;
    --color-gold-dark: #d97706;
    --color-grail: #f59e0b;
    --color-market-green: #10b981;
    --color-market-rose: #f43f5e;

    /* ==========================================================
       MODERN FLUID RESPONSIVE FRAMEWORK (MATHEMATICAL CLAMP SCALES)
       Continuous adaptation: 360px mobile -> 768px tablet -> 1440px desktop
       ========================================================== */

    /* Fluid Typography Ladder (Human Natural Reading Rhythm) */
    --step--2: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);    /* 11px -> 12px: Micro badges, timestamps */
    --step--1: clamp(0.7813rem, 0.75rem + 0.14vw, 0.875rem);   /* 12.5px -> 14px: Captions, metadata, pills */
    --step-0:  clamp(0.9375rem, 0.89rem + 0.24vw, 1.0625rem);  /* 15px -> 17px: Body, effortless human reading */
    --step-1:  clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);   /* 18px -> 21px: Subheadings, card titles */
    --step-2:  clamp(1.35rem, 1.22rem + 0.65vw, 1.6875rem);    /* 21.6px -> 27px: Section headers */
    --step-3:  clamp(1.62rem, 1.42rem + 1.0vw, 2.1875rem);     /* 26px -> 35px: Page titles */
    --step-4:  clamp(1.944rem, 1.63rem + 1.57vw, 2.8125rem);   /* 31px -> 45px: Hero titles */
    --step-5:  clamp(2.333rem, 1.88rem + 2.27vw, 3.5rem);      /* 37px -> 56px: Display headlines */

    /* Fluid Modular Spacing Scale */
    --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);   /* 4px -> 5px */
    --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);     /* 8px -> 10px */
    --space-xs:  clamp(0.75rem, 0.69rem + 0.3vw, 0.9375rem);   /* 12px -> 15px */
    --space-s:   clamp(1rem, 0.92rem + 0.4vw, 1.25rem);        /* 16px -> 20px */
    --space-m:   clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);     /* 24px -> 30px */
    --space-l:   clamp(2rem, 1.84rem + 0.8vw, 2.5rem);         /* 32px -> 40px */
    --space-xl:  clamp(3rem, 2.76rem + 1.2vw, 3.75rem);        /* 48px -> 60px */
    --space-2xl: clamp(4rem, 3.68rem + 1.6vw, 5rem);           /* 64px -> 80px */
    --page-gutter: clamp(1rem, 2.5vw, 2.5rem);                 /* Responsive screen padding */
    --reading-measure: clamp(45ch, 85vw, 68ch);                /* Human reading length */

    /* Standardized Responsive Button Metrics */
    --btn-sm-h: clamp(32px, 3.8vh, 36px);
    --btn-sm-px: clamp(10px, 1.4vw, 14px);
    --btn-md-h: clamp(40px, 4.6vh, 44px);
    --btn-md-px: clamp(14px, 2.0vw, 18px);
    --btn-lg-h: clamp(48px, 5.5vh, 52px);
    --btn-lg-px: clamp(20px, 2.8vw, 26px);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.55;
}

.font-display {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    font-weight: 800;
}

.font-mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}


/* Liquid Glass System - Guardian-grade obsidian glass with crisp hairlines */
.liquid-glass {
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 222, 216, 0.75);
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dark .liquid-glass {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    background-color: rgba(16, 17, 36, 0.85);
    border: 1px solid rgba(54, 145, 242, 0.12);
    box-shadow: 0 4px 24px -3px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(54, 145, 242, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.liquid-glass:hover {
    border-color: rgba(54, 145, 242, 0.35);
    box-shadow: 0 6px 20px -2px rgba(54, 145, 242, 0.08);
}

.dark .liquid-glass:hover {
    border-color: rgba(54, 145, 242, 0.4);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(54, 145, 242, 0.2), 0 0 50px -12px rgba(54, 145, 242, 0.15);
}

/* Ambient Radial Atmosphere (Guardian TCG Signature Lighting) */
.bg-radial-atmosphere {
    background: radial-gradient(ellipse 85% 60% at 50% -10%, rgba(56, 189, 248, 0.32) 0%, rgba(37, 99, 235, 0.22) 40%, rgba(99, 102, 241, 0.08) 65%, transparent 80%);
}

/* Risographic Gradient & Ink Diffusion Engine (Deep Obsidian with Refined Ambient Sheen) */
.bg-risograph-obsidian {
    position: relative;
    background-color: #070812;
    background-image: 
        radial-gradient(ellipse 85% 55% at 50% -12%, rgba(56, 189, 248, 0.16) 0%, rgba(37, 99, 235, 0.12) 35%, rgba(99, 102, 241, 0.04) 65%, transparent 80%),
        radial-gradient(circle at 10% 90%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(129, 140, 248, 0.05) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.028'/%3E%3C/svg%3E");
    border: 1px solid rgba(56, 189, 248, 0.16);
    box-shadow: 0 16px 45px -8px rgba(0, 0, 0, 0.6), 0 0 30px -10px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
    isolation: isolate;
}

.bg-risograph-obsidian:hover {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 20px 55px -10px rgba(0, 0, 0, 0.7), 0 0 40px -8px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Standalone Risographic Dither Grain & Bloom Overlay (Hardware-Accelerated) */
.risograph-atmosphere {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(ellipse 75% 50% at 50% -10%, rgba(56, 189, 248, 0.14) 0%, rgba(37, 99, 235, 0.08) 35%, transparent 75%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
    transform: translateZ(0);
}

/* Risographic Ambient Halo Orbs (High-Performance Shader Gradation - Zero 80px Blur Lag) */
.halo-blue-glow {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.24) 0%, rgba(37, 99, 235, 0.12) 35%, rgba(14, 165, 233, 0.03) 60%, transparent 75%);
    transform: translateZ(0);
    will-change: transform;
    pointer-events: none;
}

.halo-cyan-glow {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.26) 0%, rgba(6, 182, 212, 0.10) 40%, rgba(14, 165, 233, 0.02) 65%, transparent 75%);
    transform: translateZ(0);
    will-change: transform;
    pointer-events: none;
}

.halo-indigo-glow {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(79, 70, 229, 0.08) 40%, transparent 75%);
    transform: translateZ(0);
    will-change: transform;
    pointer-events: none;
}

.dark body {
    background-color: #07070e;
    background-image: 
        radial-gradient(ellipse 90% 65% at 50% -10%, rgba(54, 145, 242, 0.24) 0%, rgba(37, 99, 235, 0.08) 40%, transparent 70%),
        radial-gradient(circle at 10% 45%, rgba(54, 145, 242, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 90% 75%, rgba(99, 102, 241, 0.12) 0%, transparent 45%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Shadow utilities */
.shadow-3xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.shadow-2xs {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

/* Holographic Card Sheen */
.holo-sheen {
    position: relative;
    overflow: hidden;
}

.holo-sheen::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.18) 35%, rgba(147, 197, 253, 0.25) 48%, rgba(244, 114, 182, 0.25) 52%, transparent 70%);
    transform: rotate(25deg) translateY(-100%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.holo-sheen:hover::after {
    transform: rotate(25deg) translateY(100%);
}

/* ==========================================================
   AUTHENTIC 3D PHYSICAL CARD ENGINE & FOIL REFRACTION
   Inspired by Jia Liang YGO OCG Engine & Julian Garnier Anime.js
   ========================================================== */

/* 3D Perspective Stage Container - Clean Floating Stage with Zero Click-Blocking Overlap */
.card-flip-stage {
    perspective: 1200px;
    -webkit-perspective: 1200px;
    width: 100%;
    aspect-ratio: var(--card-aspect, 63 / 88);
    touch-action: pan-y;
    pointer-events: none; /* Stage outer box does not intercept clicks outside card */
    overflow: visible !important; /* Never clip tilted 3D edges */
}

.card {
    pointer-events: none;
    overflow: visible !important;
}

.card__rotator {
    pointer-events: auto !important; /* Strictly the physical card itself captures interaction */
    overflow: visible !important;
}

/* 3D Rotating & Flipping Inner Core */
.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: inherit;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(var(--rot-x, 0deg)) rotateY(calc(var(--flip-y, 0deg) + var(--rot-y, 0deg)));
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-flip-inner.is-tracking,
.card.is-tracking .card__rotator {
    transition: none;
}

.card-flip-inner.is-flipping,
.card.is-flipping .card__rotator {
    transition: transform 0.65s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

/* Card Faces & Authentic Die-Cut Clipping (Eliminates Scanner White Corners) */
.card-face-front,
.card-face-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--card-radius, 4.75% / 3.4%);
    -webkit-clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    overflow: hidden;
}

/* Substrate Light Absorption (Jia Liang Eye-Pupil Constriction Simulation) */
#main-card-image,
#back-card-image,
#lab-card-img,
#lab-back-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    -webkit-clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    transition: filter 0.25s ease-out, opacity 0.2s ease;
}

/* Subtle substrate dimming only during active tracking */
.card-flip-inner.is-tracking #main-card-image,
.card-flip-inner.is-tracking #lab-card-img {
    filter: brightness(0.92) contrast(1.1) saturate(1.05);
}

.card-face-front {
    z-index: 2;
    transform: translateZ(1px);
    overflow: hidden;
    border-radius: inherit;
    -webkit-clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.card-face-back {
    z-index: 1;
    transform: rotateY(180deg) translateZ(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0f18;
    border-radius: inherit;
    -webkit-clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    clip-path: inset(0 round var(--card-radius, 4.75% / 3.4%));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

/* Dynamic Ambient Specular Glare (Physical Reflection) */
.card-specular-glare {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    z-index: 25;
    background: radial-gradient(
        circle 320px at var(--pointer-x, 50%) var(--pointer-y, 50%),
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.16) 30%,
        transparent 65%
    );
    mix-blend-mode: overlay;
    opacity: var(--glare-o, 0);
    transition: none;
}

/* Base Holographic Foil Shimmer Layer */
.card-foil-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    opacity: var(--foil-o, 0);
    transition: none;
    display: grid;
    grid-template: 1fr / 1fr;
}

/* Foil Toggle State (when collector disables holographic overlay) */
.foil-disabled .card-foil-overlay,
.card-foil-overlay.foil-disabled,
.foil-disabled #card-foil-overlay,
.foil-disabled #lab-foil-layer {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.foil-disabled .card-specular-glare,
.card-specular-glare.foil-disabled,
.foil-disabled #card-specular-glare,
.foil-disabled #lab-glare-layer {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.foil-disabled #main-card-image,
.foil-disabled #lab-card-img,
.foil-disabled #modal-card-image {
    filter: none !important;
}

/* PROFILE 1: Yu-Gi-Oh! Secret Rare (Transparent Micro-Groove Dispersion + Alpha Holosheet) */
.foil-profile-yugioh-secret {
    background: 
        url('../images/foils/yugioh/yugioh-secret-rare-alpha.png') center / 100% 100% no-repeat,
        repeating-linear-gradient(
            30deg,
            rgba(255, 120, 0, 0.45) 0%,
            rgba(255, 230, 0, 0.5) 4%,
            rgba(0, 255, 100, 0.5) 8%,
            rgba(0, 230, 255, 0.5) 12%,
            rgba(140, 60, 255, 0.5) 16%,
            rgba(255, 60, 160, 0.5) 20%,
            rgba(255, 120, 0, 0.45) 24%
        ) var(--background-x, 50%) var(--background-y, 50%) / 300% 300% no-repeat,
        linear-gradient(transparent, rgba(0, 0, 0, 0.45), transparent) 0 0 / 100% 3px,
        linear-gradient(transparent 42%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0.5) 51%, transparent 58%) 0 calc(var(--background-y, 50%) * 0.5) / 100% 80px,
        linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0.5) 51%, transparent 55%) calc(var(--background-x, 50%) * 0.5) 0 / 80px 100%,
        radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, 0.45) 0%, transparent 60%);
    background-blend-mode: overlay, color, normal, normal, normal, normal;
    mix-blend-mode: color-dodge;
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.15);
    -webkit-clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
    clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
}

/* PROFILE 2: Yu-Gi-Oh! Starlight / QCR (Prismatic Transparency Matrix + Alpha Holosheet) */
.foil-profile-yugioh-starlight {
    background: 
        url('../images/foils/yugioh/yugioh-prismatic-alpha.png') center / 100% 100% no-repeat,
        repeating-linear-gradient(
            45deg,
            rgba(255, 120, 180, 0.4) 0%,
            rgba(255, 230, 40, 0.45) 6%,
            rgba(40, 255, 200, 0.45) 12%,
            rgba(80, 160, 255, 0.45) 18%,
            rgba(220, 80, 255, 0.45) 24%,
            rgba(255, 120, 180, 0.4) 30%
        ) var(--background-x, 50%) var(--background-y, 50%) / 320% 320% no-repeat,
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.25) 0px,
            transparent 1.5px,
            transparent 3.5px
        ) center / 100% 100%,
        radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, 0.5) 0%, transparent 50%);
    background-blend-mode: overlay, color, normal, normal;
    mix-blend-mode: color-dodge;
}

/* PROFILE 2B: Yu-Gi-Oh! Ultra / Super Rare (Translucent Aluminum Sheen + Alpha Holosheet) */
.foil-profile-yugioh-ultra {
    background: 
        url('../images/foils/yugioh/yugioh-ultra-alpha.png') center / 100% 100% no-repeat,
        linear-gradient(
            110deg,
            rgba(255, 215, 0, 0.05) 0%,
            rgba(255, 230, 100, 0.45) 45%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 200, 50, 0.45) 55%,
            rgba(255, 180, 0, 0.05) 100%
        ) var(--background-x, 50%) var(--background-y, 50%) / 250% 250%;
    background-blend-mode: overlay, normal;
    mix-blend-mode: color-dodge;
    -webkit-clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
    clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
}

/* PROFILE 2C: Yu-Gi-Oh! Ultimate Rare (Embossed Relief & Perimeter Ring) */
.foil-profile-yugioh-ultimate {
    background: 
        repeating-radial-gradient(
            circle at var(--background-x, 50%) var(--background-y, 50%),
            rgba(255, 220, 120, 0.5) 0px,
            transparent 2px,
            transparent 6px
        ),
        linear-gradient(
            45deg,
            rgba(255, 215, 0, 0.3) 0%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(200, 150, 0, 0.3) 100%
        ) var(--background-x, 50%) var(--background-y, 50%) / 200% 200%;
    background-blend-mode: overlay, normal;
    mix-blend-mode: color-dodge;
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.4);
    -webkit-clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
    clip-path: polygon(11.8% 18.0%, 88.2% 18.0%, 88.2% 70.4%, 11.8% 70.4%);
}

/* ==========================================================================
   AUTHENTIC 3D PHYSICAL CARD GEOMETRY, DIE-CUT CLIPPING & FLIP ENGINE
   ========================================================================== */

/* Per-TCG Geometry & Corner Radii */
.card.pokemon {
    --card-aspect: 63 / 88;
    --card-radius: 4.55% / 3.5%;
}
.card.yugioh {
    --card-aspect: 59 / 86;
    --card-radius: 2.8% / 2.0%;
}
.card.magic {
    --card-aspect: 63 / 88;
    --card-radius: 3.8% / 2.8%;
}
.card.onepiece {
    --card-aspect: 63 / 88;
    --card-radius: 4.2% / 3.2%;
}
.card.lorcana {
    --card-aspect: 63 / 88;
    --card-radius: 4.5% / 3.5%;
}

/* Ensure 3D ancestors never have clip-path or flatten transform-style */
.card,
.card__translater,
.card__rotator {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* Hardware-Accelerated Die-Cut Clipping on leaf card face assets (Eliminates Scanner White Corners) */
.card__front,
.card__back,
.card__image,
.card__front img,
.card__back img,
.card-face-front,
.card-face-back,
#main-card-image,
#back-card-image,
#modal-card-image,
#modal-back-image,
#ds-card-image {
    -webkit-clip-path: inset(0 round var(--card-radius, 4.55% / 3.5%));
    clip-path: inset(0 round var(--card-radius, 4.55% / 3.5%));
    border-radius: var(--card-radius, 4.55% / 3.5%);
}

/* 3D Physical Multi-Ply Cardstock Rim Depth */
.card__rotator,
.card-flip-inner {
    border-radius: var(--card-radius, 4.55% / 3.5%);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 14px 34px -4px rgba(0, 0, 0, 0.65),
        0 4px 12px -2px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease;
}

.card.is-hovered .card__rotator,
.card.active .card__rotator,
.card-flip-inner.is-hovered,
.card-flip-inner.active {
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 24px 50px -10px rgba(0, 0, 0, 0.8),
        0 8px 20px -4px rgba(0, 0, 0, 0.45);
}

.card__front,
.card__back,
.card-face-front,
.card-face-back {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 2px rgba(0, 0, 0, 0.22);
}

/* 180° Flip Mechanics - Stacking Context Guaranteed & Authentic Unmirrored Back */
.card.is-flipped .card__rotator,
.card-flip-inner.is-flipped {
    -webkit-transform: rotateY(calc(180deg - var(--rotate-x, 0deg))) rotateX(var(--rotate-y, 0deg)) !important;
    transform: rotateY(calc(180deg - var(--rotate-x, 0deg))) rotateX(var(--rotate-y, 0deg)) !important;
}

.card.is-flipped .card__front {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.card.is-flipped .card__back {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: rotateY(180deg) translate3d(0px, 0px, 0.01px) !important;
    -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 0.01px) !important;
}

/* Pointer events isolation for inactive modals */
#modal-3d-inspect.pointer-events-none,
#modal-3d-inspect.pointer-events-none * {
    pointer-events: none !important;
}

.card:not(.is-flipped) .card__back {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.card:not(.is-flipped) .card__front {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Tracking State (Smooth 60/120fps rAF Lerp Loop active) */
.card.is-tracking .card__rotator,
.card-flip-inner.is-tracking {
    transition: none !important;
}

/* Disabled Foils / Non-Pokemon / Non-Foil Cards */
.card.foil-disabled .card__shine,
.card.foil-disabled .card__glitter,
.card.foil-disabled .card__glare2,
.foil-disabled .card__shine,
.foil-disabled .card__glitter,
.foil-disabled .card__glare2,
.card[data-rarity="matte"] .card__shine,
.card[data-rarity="matte"] .card__glitter,
.card[data-rarity="matte"] .card__glare2 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Legacy profile class mappings */
.foil-profile-pokemon-gold[data-rarity=""],
.foil-profile-pokemon-gold:not([data-rarity]) { --data-rarity: "hyper rare"; }
.foil-profile-pokemon-sir[data-rarity=""],
.foil-profile-pokemon-sir:not([data-rarity]) { --data-rarity: "special illustration rare"; }
.foil-profile-pokemon-ir[data-rarity=""],
.foil-profile-pokemon-ir:not([data-rarity]) { --data-rarity: "illustration rare"; }
.foil-profile-pokemon-pokeball[data-rarity=""],
.foil-profile-pokemon-pokeball:not([data-rarity]) { --data-rarity: "pokeball holo"; }
.foil-profile-pokemon-masterball[data-rarity=""],
.foil-profile-pokemon-masterball:not([data-rarity]) { --data-rarity: "masterball holo"; }
.foil-profile-pokemon-reverse[data-rarity=""],
.foil-profile-pokemon-reverse:not([data-rarity]) { --data-rarity: "reverse holo"; }
.foil-profile-pokemon-cosmos[data-rarity=""],
.foil-profile-pokemon-cosmos:not([data-rarity]) { --data-rarity: "rare holo cosmos"; }
.foil-profile-pokemon-radiant[data-rarity=""],
.foil-profile-pokemon-radiant:not([data-rarity]) { --data-rarity: "radiant holo"; }
.foil-profile-pokemon-rainbow[data-rarity=""],
.foil-profile-pokemon-rainbow:not([data-rarity]) { --data-rarity: "rainbow rare"; }
.foil-profile-pokemon-v[data-rarity=""],
.foil-profile-pokemon-v:not([data-rarity]) { --data-rarity: "v regular"; }

.card-foil-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    transition: opacity 0.3s ease;
}

.foil-active-glow {
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 0 20px -8px rgba(54, 145, 242, 0.08) !important;
}

/* ==========================================================
   HIGH-CONTRAST MONOCHROME PILLS & MODERN BADGES
   Crisp dark on light in light mode; crisp white on glass in dark mode
   ========================================================== */
.pill-mono {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    background-color: #f1f3f5;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}
.dark .pill-mono {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pill-mono-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    background-color: #0f111a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.dark .pill-mono-dark {
    background-color: #ffffff;
    color: #0c0d14;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.pill-mono-subtle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    line-height: 1;
    padding: 0.22rem 0.5rem;
    border-radius: 9999px;
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .pill-mono-subtle {
    background-color: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pill-mono-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(54, 145, 242, 0.12), rgba(37, 99, 235, 0.18));
    color: #1d4ed8;
    border: 1px solid rgba(54, 145, 242, 0.35);
}
.dark .pill-mono-accent {
    background: linear-gradient(135deg, rgba(54, 145, 242, 0.2), rgba(37, 99, 235, 0.28));
    color: #93c5fd;
    border: 1px solid rgba(54, 145, 242, 0.4);
}

/* ==========================================================
   MINIMALIST EDITORIAL DIVIDERS & TEXT + ICON HEADERS
   ========================================================== */
.divider-simple {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: var(--space-s) 0;
    width: 100%;
}
.dark .divider-simple {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.divider-hairline {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin: var(--space-xs) 0;
    width: 100%;
}
.dark .divider-hairline {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.section-header-simple {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    color: inherit;
}

/* ==========================================================
   FLUID RESPONSIVE UTILITY CLASSES
   ========================================================== */
.text-step--2 { font-size: var(--step--2); }
.text-step--1 { font-size: var(--step--1); }
.text-step-0  { font-size: var(--step-0); }
.text-step-1  { font-size: var(--step-1); }
.text-step-2  { font-size: var(--step-2); }
.text-step-3  { font-size: var(--step-3); }
.text-step-4  { font-size: var(--step-4); }
.text-step-5  { font-size: var(--step-5); }

.gap-fluid-xs { gap: var(--space-xs); }
.gap-fluid-sm { gap: var(--space-s); }
.gap-fluid-md { gap: var(--space-m); }
.gap-fluid-lg { gap: var(--space-l); }
.p-fluid-page { padding-inline: var(--page-gutter); }

.btn-fluid-sm {
    min-height: var(--btn-sm-h);
    padding: 0.35rem var(--btn-sm-px);
    font-size: var(--step--1);
}
.btn-fluid-md {
    min-height: var(--btn-md-h);
    padding: 0.5rem var(--btn-md-px);
    font-size: var(--step-0);
}
.btn-fluid-lg {
    min-height: var(--btn-lg-h);
    padding: 0.65rem var(--btn-lg-px);
    font-size: var(--step-1);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(168, 162, 158, 0.3);
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(87, 83, 78, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-in {
    animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards fadeIn;
}

.animate-slide-in {
    animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards slideIn;
}

/* Modal overlay & container */
.modal-backdrop {
    background: rgba(12, 10, 9, 0.65);
    backdrop-filter: blur(8px);
}

/* =======================================================
   BESPOKE TOP 4 TCG BRAND THEMES
   ======================================================= */

/* 1. Pokémon Theme (Standard 63x88mm, 3.0mm Corner Die-Cut) */
.theme-pokemon,
.card.pokemon {
    --card-aspect: 63 / 88;
    --card-radius: 4.75% / 3.4%;
    --brand-primary: #eab308;
    --brand-accent: #3b82f6;
    --brand-border: rgba(234, 179, 8, 0.25);
    --brand-glow: rgba(234, 179, 8, 0.15);
}
.theme-pokemon .brand-accent-text { color: #f59e0b; }
.theme-pokemon .brand-accent-bg { background-color: #f59e0b; }
.theme-pokemon .brand-border-glow { border-color: rgba(245, 158, 11, 0.3); box-shadow: 0 0 20px rgba(245, 158, 11, 0.08); }
.theme-pokemon .brand-badge { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }

/* 2. Yu-Gi-Oh! Theme (Small Japanese 59x86mm, 2.0mm Corner Die-Cut) */
.theme-yugioh,
.card.yugioh {
    --card-aspect: 59 / 86;
    --card-radius: 3.4% / 2.33%;
    --brand-primary: #d97706;
    --brand-accent: #a855f7;
    --brand-border: rgba(217, 119, 6, 0.25);
    --brand-glow: rgba(168, 85, 247, 0.15);
}
.theme-yugioh .brand-accent-text { color: #eab308; }
.theme-yugioh .brand-accent-bg { background-color: #d97706; }
.theme-yugioh .brand-border-glow { border-color: rgba(234, 179, 8, 0.35); box-shadow: 0 0 22px rgba(217, 119, 6, 0.12); }
.theme-yugioh .brand-badge { background: rgba(147, 51, 234, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
.theme-yugioh .stat-box { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(234, 179, 8, 0.3); color: #78350f; }
.dark .theme-yugioh .stat-box { background: rgba(15, 12, 10, 0.85); border: 1px solid rgba(234, 179, 8, 0.35); color: #fef3c7; }

/* 3. Magic: The Gathering Theme (Standard 63x88mm, Sharp 2.0mm Corner Die-Cut) */
.theme-magic,
.card.magic {
    --card-aspect: 63 / 88;
    --card-radius: 3.2% / 2.3%;
    --brand-primary: #ea580c;
    --brand-accent: #64748b;
    --brand-border: rgba(234, 88, 12, 0.25);
    --brand-glow: rgba(234, 88, 12, 0.12);
}
.theme-magic .brand-accent-text { color: #f97316; }
.theme-magic .brand-accent-bg { background-color: #ea580c; }
.theme-magic .brand-border-glow { border-color: rgba(234, 88, 12, 0.3); box-shadow: 0 0 20px rgba(234, 88, 12, 0.08); }
.theme-magic .brand-badge { background: rgba(234, 88, 12, 0.12); color: #fb923c; border: 1px solid rgba(234, 88, 12, 0.3); }
.theme-magic .oracle-frame { background: rgba(244, 244, 245, 0.85); border: 1px solid rgba(212, 212, 216, 0.8); color: #18181b; font-family: Georgia, Cambria, "Times New Roman", Times, serif; }
.dark .theme-magic .oracle-frame { background: rgba(24, 24, 27, 0.7); border: 1px solid rgba(113, 113, 122, 0.3); color: #f4f4f5; font-family: Georgia, Cambria, "Times New Roman", Times, serif; }

/* 4. One Piece Card Game Theme (Standard 63x88mm, 2.5mm Corner Die-Cut) */
.theme-onepiece,
.card.onepiece,
.theme-lorcana,
.card.lorcana {
    --card-aspect: 63 / 88;
    --card-radius: 4.0% / 2.85%;
    --brand-primary: #dc2626;
    --brand-accent: #f59e0b;
    --brand-border: rgba(220, 38, 38, 0.25);
    --brand-glow: rgba(220, 38, 38, 0.15);
}
.theme-onepiece .brand-accent-text { color: #ef4444; }
.theme-onepiece .brand-accent-bg { background-color: #dc2626; }
.theme-onepiece .brand-border-glow { border-color: rgba(239, 68, 68, 0.35); box-shadow: 0 0 22px rgba(220, 38, 38, 0.12); }
.theme-onepiece .brand-badge { background: rgba(220, 38, 38, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Quick Switcher Dock & Filter Badges */
.quick-dock {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.quick-dock::-webkit-scrollbar {
    display: none;
}

/* =======================================================
   NORMALIZED TYPOGRAPHY & PROPORTIONS
   ======================================================= */
.heading-hero {
    font-size: clamp(1.85rem, 3.8vw, 3.15rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: none;
}

.heading-page {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Reusable Surface Panels - Crisp Institutional Light & Obsidian Dark */
.dark-panel {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    color: #0f172a;
}

.dark .dark-panel {
    background: radial-gradient(ellipse 100% 80% at 50% -20%, #1c2246 0%, #111326 50%, #0a0b16 100%);
    border: 1px solid rgba(54, 145, 242, 0.16);
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.6), 0 0 35px -5px rgba(54, 145, 242, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.dark-panel-glow {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08);
    color: #0f172a;
}

.dark .dark-panel-glow {
    background: linear-gradient(135deg, rgba(20, 28, 62, 0.95) 0%, rgba(11, 13, 26, 0.98) 55%, rgba(34, 25, 72, 0.95) 100%);
    border: 1px solid rgba(54, 145, 242, 0.18);
    box-shadow: 0 14px 45px -8px rgba(0, 0, 0, 0.7), 0 0 60px -10px rgba(54, 145, 242, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.heading-section {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.heading-card {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 700;
}

/* Authentic TCG Card Cutout & Bezel */
.tcg-card-cutout {
    position: relative;
    padding: 0.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tcg-card-bezel {
    position: relative;
    border-radius: 1.125rem;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #1e1b18 0%, #0c0a09 100%);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.tcg-rule-box {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 222, 216, 0.9);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    color: #0f172a;
}

.dark .tcg-rule-box {
    background: rgba(20, 22, 36, 0.75);
    border: 1px solid rgba(54, 145, 242, 0.14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #f8fafc;
}

.body-lead {
    font-size: 1.0625rem; /* 17px */
    line-height: 1.65;
    font-weight: 400;
}

.body-tcg {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    font-weight: 500;
}

.dark-panel .body-tcg {
    color: #1e293b;
}

.dark .dark-panel .body-tcg {
    color: rgba(245, 245, 244, 0.92);
}

.body-tcg-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    font-weight: 500;
}

.label-mono {
    font-family: var(--font-mono);
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =======================================================
   INTERACTIVE CARD ANATOMY DIAGRAM SYSTEM
   ======================================================= */
.anatomy-card-frame {
    position: relative;
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    user-select: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.anatomy-card-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.anatomy-callout-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.anatomy-callout-badge:hover {
    transform: scale(1.15);
    filter: brightness(1.2);
}

/* =======================================================
   SUBTLE ANIMATION & INTERACTION UTILITIES
   ======================================================= */

/* Staggered fade-in for grid children */
.animate-stagger-in > * {
    opacity: 0;
    transform: translateY(8px);
    animation: staggerFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-stagger-in > *:nth-child(1) { animation-delay: 0s; }
.animate-stagger-in > *:nth-child(2) { animation-delay: 0.04s; }
.animate-stagger-in > *:nth-child(3) { animation-delay: 0.08s; }
.animate-stagger-in > *:nth-child(4) { animation-delay: 0.12s; }
.animate-stagger-in > *:nth-child(5) { animation-delay: 0.16s; }
.animate-stagger-in > *:nth-child(6) { animation-delay: 0.20s; }
.animate-stagger-in > *:nth-child(n+7) { animation-delay: 0.24s; }

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

/* Hover lift — gentle raise on hover */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Hover glow — subtle blue border glow */
.hover-glow {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hover-glow:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.12);
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Horizontal scroll snap for carousels */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.scroll-snap-x > * {
    scroll-snap-align: start;
}

/* Bulbapedia-Grade Wiki Styling System */
.wiki-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.wiki-table th {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.wiki-table td {
    border-top: 1px solid rgba(220, 216, 210, 0.6);
}

.dark .wiki-table td {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Smooth sticky sidebar transitions */
@media (min-width: 1024px) {
    aside.lg\:sticky {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

/* Valuation Trajectory Chart styling */
#trajectory-svg line {
    transition: opacity 0.15s ease, x1 0.05s ease, x2 0.05s ease;
}

#chart-hover-dot {
    transition: opacity 0.15s ease, cx 0.05s ease, cy 0.05s ease;
}

#chart-line {
    filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.35));
}

/* Bento Grid System for Relational TCG Intelligence */
.bento-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.bento-card {
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 222, 216, 0.8);
    border-radius: 1.5rem;
    padding: 1.25rem;
    box-shadow: 0 2px 14px -2px rgba(0, 0, 0, 0.03);
    color: #0f172a;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark .bento-card {
    background-color: rgba(16, 17, 36, 0.85);
    border: 1px solid rgba(54, 145, 242, 0.12);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.5), 0 0 30px -8px rgba(54, 145, 242, 0.06);
    color: #f8fafc;
}

.bento-card:hover {
    border-color: rgba(54, 145, 242, 0.35);
    box-shadow: 0 8px 24px -4px rgba(54, 145, 242, 0.08);
}

.dark .bento-card:hover {
    border-color: rgba(54, 145, 242, 0.4);
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(54, 145, 242, 0.15), 0 0 40px -10px rgba(54, 145, 242, 0.12);
}

/* Touch targets and ergonomic mobile interactions */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter Pill Controls */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    font-weight: 600;
    transition: all 0.15s ease;
    border: 1px solid rgba(226, 222, 216, 0.85);
    background-color: rgba(255, 255, 255, 0.88);
    color: #44403c;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.dark .pill-btn {
    border-color: rgba(54, 145, 242, 0.14);
    background-color: rgba(20, 22, 36, 0.75);
    color: #cbd5e1;
}

.pill-btn:hover {
    border-color: rgba(59, 130, 246, 0.4);
    color: #0f172a;
    background-color: #ffffff;
}

.dark .pill-btn:hover {
    border-color: rgba(54, 145, 242, 0.4);
    color: #ffffff;
    background-color: rgba(28, 32, 54, 0.9);
}

.pill-btn.active,
.pill-btn-active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Accessibility: High-Contrast Focus Visible Rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 0.5rem;
}

/* Screen Reader Utility Classes (WCAG) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

.not-sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}



/* Obsidian Glow Buttons (Light & Dark Mix) */
.btn-obsidian-glow {
    background-color: #0c0d18;
    color: #f8fafc;
    border: 1px solid rgba(54, 145, 242, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 15px -2px rgba(54, 145, 242, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-obsidian-glow:hover {
    background-color: #121425;
    border-color: rgba(54, 145, 242, 0.6);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 25px rgba(54, 145, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.text-obsidian-glow {
    background: linear-gradient(135deg, #f8fafc 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(54, 145, 242, 0.3);
}

/* Light / Dark Mixed Panels */
.mixed-panel {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.mixed-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at top right, rgba(54, 145, 242, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.dark .mixed-panel {
    background: linear-gradient(145deg, #10111d, #090912);
    border: 1px solid rgba(54, 145, 242, 0.15);
}

.dark .mixed-panel::before {
    background: radial-gradient(circle at top right, rgba(54, 145, 242, 0.15) 0%, transparent 60%);
}