/**
 * TCG Pokemon Public Styles
 * Modern, immersive design inspired by Pokemon TCG Pocket
 * Compatible with Kadence theme
 */

/* ============================================
   DESIGN SYSTEM - CSS Variables
   ============================================ */
:root {
    /* Primary Colors - Pokemon Theme */
    --tcgp-primary: #E3350D;
    --tcgp-primary-light: #FF5733;
    --tcgp-primary-dark: #B02A0A;
    --tcgp-secondary: #3B4CCA;
    --tcgp-secondary-light: #5A6AE6;
    --tcgp-accent: #FFCB05;
    --tcgp-accent-dark: #D4A904;

    /* Neutral Colors */
    --tcgp-bg: #F5F7FA;
    --tcgp-bg-card: #FFFFFF;
    --tcgp-bg-elevated: #FFFFFF;
    --tcgp-surface: #F0F2F5;
    --tcgp-border: #E1E5EB;
    --tcgp-border-light: #F0F2F5;

    /* Text Colors */
    --tcgp-text: #1A1D26;
    --tcgp-text-secondary: #5C6370;
    --tcgp-text-muted: #6B7280; /* 1.4.0: #8B919A era 2,8:1 sui riquadri grigi del tema chiaro */
    --tcgp-text-inverse: #FFFFFF;
    --tcgp-text-success: #1E7B34; /* testi verdi/ambra leggibili sul chiaro; nel tema scuro sotto */
    --tcgp-on-secondary: #FFFFFF; /* testo dei pulsanti secondari (nel tema scuro il pulsante è azzurro chiaro) */
    --tcgp-text-warning: #8A5A00;

    /* Link: nel tema chiaro scuri (prima non erano definiti e valeva il bianco di ripiego: bianco su bianco) */
    --tcgp-link: #1A1D26;
    --tcgp-link-hover: #E3350D;

    /* Status Colors */
    --tcgp-success: #10B981;
    --tcgp-warning: #F59E0B;
    --tcgp-danger: #EF4444;
    --tcgp-info: #3B82F6;

    /* Pokemon Type Colors - Vibrant */
    --tcgp-type-grass: #7AC74C;
    --tcgp-type-fire: #EE8130;
    --tcgp-type-water: #6390F0;
    --tcgp-type-lightning: #F7D02C;
    --tcgp-type-psychic: #F95587;
    --tcgp-type-fighting: #C22E28;
    --tcgp-type-darkness: #705746;
    --tcgp-type-metal: #B7B7CE;
    --tcgp-type-dragon: #6F35FC;
    --tcgp-type-colorless: #A8A77A;
    --tcgp-type-fairy: #D685AD;

    /* Shadows */
    --tcgp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tcgp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tcgp-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tcgp-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --tcgp-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --tcgp-shadow-glow: 0 0 20px rgba(227, 53, 13, 0.3);
    --tcgp-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --tcgp-radius-sm: 6px;
    --tcgp-radius: 12px;
    --tcgp-radius-lg: 16px;
    --tcgp-radius-xl: 24px;
    --tcgp-radius-full: 9999px;

    /* Transitions */
    --tcgp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --tcgp-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --tcgp-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --tcgp-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Spacing */
    --tcgp-space-xs: 4px;
    --tcgp-space-sm: 8px;
    --tcgp-space-md: 16px;
    --tcgp-space-lg: 24px;
    --tcgp-space-xl: 32px;
    --tcgp-space-2xl: 48px;

    /* Card Dimensions */
    --tcgp-card-ratio: 7 / 10;
    --tcgp-card-min-width: 160px;
    --tcgp-card-max-width: 280px;

    /* Z-Index Scale */
    --tcgp-z-base: 1;
    --tcgp-z-dropdown: 100;
    --tcgp-z-sticky: 200;
    --tcgp-z-modal: 300;
    --tcgp-z-tooltip: 400;
}

/* Dark Mode Support - Kadence Compatible */
.dark-mode,
[data-theme="dark"],
body.dark,
.kb-dark-mode,
body[class*="dark"],
html[class*="dark"] {
    --tcgp-bg: #0F1219;
    --tcgp-bg-card: #1A1D26;
    --tcgp-bg-elevated: #242832;
    --tcgp-surface: #1E222B;
    --tcgp-border: #2D3341;
    --tcgp-border-light: #242832;
    --tcgp-text: #F5F7FA;
    --tcgp-text-secondary: #B8BCC5;
    --tcgp-text-muted: #8B919A;
    --tcgp-text-success: #46B450;
    --tcgp-text-warning: #F0B849;
    --tcgp-on-secondary: #0F1219;
    --tcgp-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);

    /* Fix link colors for dark mode */
    --tcgp-link: #FFFFFF;
    --tcgp-link-hover: #E3350D;
    --tcgp-secondary: #8BA3F9;
}

/* Force dark mode when Kadence uses dark palette */
body .tcgp-content-area,
body .tcgp-page,
body .tcgp-cards-wrapper {
    color: var(--tcgp-text);
}

/* ============================================
   DARK MODE OVERRIDES - Full Contrast Fix
   ============================================ */

/* Titles and headings */
.tcgp-single-card-name,
.tcgp-card-name,
.tcgp-section-title,
.tcgp-widget-title,
h1.entry-title,
.tcgp-single-card-header h1 {
    color: var(--tcgp-text) !important;
}

/* All links in TCGP context */
.tcgp-content-area a,
.tcgp-page a,
.tcgp-cards-wrapper a {
    color: var(--tcgp-link, var(--tcgp-text));
}

.tcgp-content-area a:hover,
.tcgp-page a:hover,
.tcgp-cards-wrapper a:hover {
    color: var(--tcgp-link-hover, var(--tcgp-primary));
}

/* Card info text */
.tcgp-card-code,
.tcgp-card-expansion-link,
.tcgp-card-rarity-link {
    color: var(--tcgp-text-secondary) !important;
}

.tcgp-card-expansion-link:hover,
.tcgp-card-rarity-link:hover {
    color: var(--tcgp-primary) !important;
}

/* Labels */
.tcgp-single-card-types label,
.tcgp-single-card-packs label,
.tcgp-single-card-evolution label,
.tcgp-single-card-stats label,
.tcgp-extra-item label {
    color: var(--tcgp-text-muted) !important;
}

/* Card blocks backgrounds */
.tcgp-single-card-evolution,
.tcgp-single-card-stats,
.tcgp-single-card-extra {
    background: var(--tcgp-surface) !important;
}

/* Attack cards */
.tcgp-attack {
    background: var(--tcgp-bg-card) !important;
    border-color: var(--tcgp-border) !important;
}

.tcgp-attack-name {
    color: var(--tcgp-text) !important;
}

.tcgp-attack-text {
    color: var(--tcgp-text-secondary) !important;
}

/* Flavor text */
.tcgp-flavor-text {
    color: var(--tcgp-text-secondary) !important;
    border-left-color: var(--tcgp-border) !important;
}

/* Widget */
.tcgp-sidebar-widget {
    background: var(--tcgp-bg-card) !important;
    border-color: var(--tcgp-border) !important;
}

.tcgp-widget-card-name {
    color: var(--tcgp-text) !important;
}

.tcgp-widget-card-expansion {
    color: var(--tcgp-text-muted) !important;
}

.tcgp-widget-card-link {
    background: var(--tcgp-surface) !important;
}

.tcgp-widget-card-link:hover {
    background: var(--tcgp-bg-elevated) !important;
}

/* Related cards section */
.tcgp-related-cards {
    border-top-color: var(--tcgp-border) !important;
}

/* Article/entry background */
.tcgp-single-card.entry.content-bg {
    background: var(--tcgp-bg-card) !important;
}

/* Meta info */
.tcgp-single-card-meta .tcgp-card-code {
    background: var(--tcgp-surface) !important;
    color: var(--tcgp-text-muted) !important;
}

/* Evolution links */
.tcgp-single-card-evolution a,
.tcgp-single-card-evolution span {
    color: var(--tcgp-text) !important;
}

.tcgp-single-card-evolution a:hover {
    color: var(--tcgp-primary) !important;
}

/* ============================================
   BASE CONTAINER
   ============================================ */
.tcgp-page,
.tcgp-cards-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--tcgp-space-lg);
    font-family: inherit;
    color: var(--tcgp-text);
    background: var(--tcgp-bg);
}

.tcgp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--tcgp-space-md);
}

/* ============================================
   FILTER PANEL - Glassmorphism Style
   ============================================ */
.tcgp-filters-panel {
    background: var(--tcgp-bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-lg);
    padding: var(--tcgp-space-lg);
    margin-bottom: var(--tcgp-space-xl);
    box-shadow: var(--tcgp-shadow);
    transition: var(--tcgp-transition);
}

.tcgp-filters-panel:hover {
    box-shadow: var(--tcgp-shadow-md);
}

.tcgp-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tcgp-space-lg);
}

.tcgp-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-sm);
}

.tcgp-filter-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--tcgp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tcgp-filter-input,
.tcgp-filter-select {
    padding: 12px 16px;
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius);
    font-size: 14px;
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    transition: var(--tcgp-transition);
}

.tcgp-filter-input:hover,
.tcgp-filter-select:hover {
    border-color: var(--tcgp-text-muted);
}

.tcgp-filter-input:focus,
.tcgp-filter-select:focus {
    border-color: var(--tcgp-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(227, 53, 13, 0.1);
}

/* Toggle Buttons - Modern Pill Style */
.tcgp-toggle-group {
    display: flex;
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-full);
    padding: 4px;
    gap: 4px;
}

.tcgp-toggle-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: var(--tcgp-radius-full);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tcgp-text-secondary);
    transition: var(--tcgp-transition);
}

.tcgp-toggle-btn:hover {
    color: var(--tcgp-text);
    background: var(--tcgp-bg-card);
}

.tcgp-toggle-btn.active {
    background: var(--tcgp-primary);
    color: var(--tcgp-text-inverse);
    box-shadow: var(--tcgp-shadow-sm);
}

/* Type Chips - Enhanced with glow */
.tcgp-chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-sm);
}

.tcgp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--tcgp-radius-full);
    cursor: pointer;
    transition: var(--tcgp-transition);
    border: 2px solid transparent;
    background: var(--chip-color, var(--tcgp-text-muted));
    opacity: 0.5;
    transform: scale(1);
}

.tcgp-chip:hover {
    opacity: 0.75;
    transform: scale(1.05);
}

.tcgp-chip input {
    display: none;
}

.tcgp-chip.selected,
.tcgp-chip:has(input:checked) {
    opacity: 1;
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px var(--chip-color, rgba(0,0,0,0.3));
}

.tcgp-chip-label {
    color: var(--tcgp-text-inverse);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Range Inputs */
.tcgp-range-group {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
}

.tcgp-range-input {
    width: 90px;
    padding: 10px 14px;
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius);
    font-size: 14px;
    text-align: center;
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    transition: var(--tcgp-transition);
}

.tcgp-range-input:focus {
    border-color: var(--tcgp-primary);
    outline: none;
}

.tcgp-range-separator {
    color: var(--tcgp-text-muted);
    font-weight: 500;
}

/* Filter Actions */
.tcgp-filter-actions {
    display: flex;
    gap: var(--tcgp-space-md);
    padding-top: var(--tcgp-space-lg);
    margin-top: var(--tcgp-space-md);
    border-top: 1px solid var(--tcgp-border);
    grid-column: 1 / -1;
}

/* Collapsible Filters */
.tcgp-filters-collapsible .tcgp-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tcgp-space-md);
}

.tcgp-filters-collapsible .tcgp-filters-title {
    margin: 0;
    font-size: 14px;
}

.tcgp-filters-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--tcgp-surface);
    border: 1px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-sm);
    font-size: 12px;
    color: var(--tcgp-text-secondary);
    cursor: pointer;
    transition: var(--tcgp-transition-fast);
}

.tcgp-filters-toggle:hover {
    background: var(--tcgp-primary);
    color: var(--tcgp-text-inverse);
    border-color: var(--tcgp-primary);
}

.tcgp-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.tcgp-filters-collapsible.is-expanded .tcgp-toggle-icon {
    transform: rotate(180deg);
}

.tcgp-filters-advanced {
    display: none;
}

.tcgp-filters-collapsible.is-expanded .tcgp-filters-advanced {
    display: block;
}

.tcgp-filter-always-visible {
    margin-bottom: var(--tcgp-space-sm);
}

.tcgp-search-main {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
}

/* Related Terms Menu (Altri Tipi, Altre Espansioni, etc.) */
.tcgp-related-terms {
    background: var(--tcgp-bg-card);
    border: 1px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius);
    padding: var(--tcgp-space-md);
    margin-top: var(--tcgp-space-md);
}

.tcgp-related-terms-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tcgp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--tcgp-space-sm);
    padding-bottom: var(--tcgp-space-xs);
    border-bottom: 1px solid var(--tcgp-border-light);
}

.tcgp-related-terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tcgp-related-terms-list li {
    margin: 0;
}

.tcgp-related-terms-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--tcgp-surface);
    border: 1px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-sm);
    font-size: 12px;
    color: var(--tcgp-text);
    text-decoration: none;
    transition: var(--tcgp-transition-fast);
}

.tcgp-related-terms-list a:hover {
    background: var(--tcgp-primary);
    border-color: var(--tcgp-primary);
    color: var(--tcgp-text-inverse);
}

.tcgp-term-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Buttons - Modern with hover effects */
.tcgp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tcgp-space-sm);
    padding: 14px 28px;
    border: none;
    border-radius: var(--tcgp-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tcgp-transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.tcgp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: var(--tcgp-transition);
}

.tcgp-btn:hover::before {
    opacity: 1;
}

.tcgp-btn-primary {
    background: linear-gradient(135deg, var(--tcgp-primary) 0%, var(--tcgp-primary-dark) 100%);
    color: var(--tcgp-text-inverse);
    box-shadow: 0 4px 15px rgba(227, 53, 13, 0.3);
}

.tcgp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 53, 13, 0.4);
}

.tcgp-btn-secondary {
    background: var(--tcgp-secondary);
    color: var(--tcgp-text-inverse);
}

.tcgp-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 76, 202, 0.3);
}

.tcgp-btn-reset,
.tcgp-btn-outline {
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    border: 2px solid var(--tcgp-border);
}

.tcgp-btn-reset:hover,
.tcgp-btn-outline:hover {
    border-color: var(--tcgp-text-muted);
    background: var(--tcgp-surface);
}

/* ============================================
   CARDS HEADER & SORTING
   ============================================ */
.tcgp-cards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tcgp-space-lg);
    flex-wrap: wrap;
    gap: var(--tcgp-space-md);
}

.tcgp-results-count {
    color: var(--tcgp-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.tcgp-results-count strong {
    color: var(--tcgp-text);
    font-weight: 700;
}

.tcgp-sort-options {
    display: flex;
    gap: var(--tcgp-space-sm);
}

.tcgp-sort-options select {
    padding: 10px 16px;
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius);
    font-size: 13px;
    font-weight: 500;
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    cursor: pointer;
    transition: var(--tcgp-transition);
}

.tcgp-sort-options select:hover {
    border-color: var(--tcgp-text-muted);
}

.tcgp-sort-options select:focus {
    border-color: var(--tcgp-primary);
    outline: none;
}

/* ============================================
   CARDS GRID - Responsive Layout
   ============================================ */
.tcgp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tcgp-card-min-width), 1fr));
    gap: var(--tcgp-space-lg);
    perspective: 1000px;
    padding-top: 20px;
}

.tcgp-cards-wrapper[data-columns="2"] .tcgp-cards-grid {
    grid-template-columns: repeat(2, 1fr);
}

.tcgp-cards-wrapper[data-columns="3"] .tcgp-cards-grid {
    grid-template-columns: repeat(3, 1fr);
}

.tcgp-cards-wrapper[data-columns="4"] .tcgp-cards-grid {
    grid-template-columns: repeat(4, 1fr);
}

.tcgp-cards-wrapper[data-columns="5"] .tcgp-cards-grid {
    grid-template-columns: repeat(5, 1fr);
}

.tcgp-cards-wrapper[data-columns="6"] .tcgp-cards-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================
   CARD ITEM - 3D Hover Effect
   ============================================ */
.tcgp-card-item {
    position: relative;
    background: var(--tcgp-bg-card);
    border-radius: var(--tcgp-radius-lg);
    overflow: hidden;
    transition: var(--tcgp-transition);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}

.tcgp-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card hover - 3D lift effect */
.tcgp-card-item:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow:
        var(--tcgp-shadow-lg),
        0 30px 60px -20px rgba(0, 0, 0, 0.2);
}

/* Type-based glow on hover */
.tcgp-card-item[data-type="fire"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(238, 129, 48, 0.4);
}

.tcgp-card-item[data-type="water"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(99, 144, 240, 0.4);
}

.tcgp-card-item[data-type="grass"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(122, 199, 76, 0.4);
}

.tcgp-card-item[data-type="lightning"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(247, 208, 44, 0.5);
}

.tcgp-card-item[data-type="psychic"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(249, 85, 135, 0.4);
}

.tcgp-card-item[data-type="fighting"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(194, 46, 40, 0.4);
}

.tcgp-card-item[data-type="darkness"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(112, 87, 70, 0.5);
}

.tcgp-card-item[data-type="metal"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(183, 183, 206, 0.5);
}

.tcgp-card-item[data-type="dragon"]:hover {
    box-shadow:
        var(--tcgp-shadow-lg),
        0 0 40px rgba(111, 53, 252, 0.4);
}

.tcgp-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* ============================================
   CARD IMAGE - With Loading & Effects
   ============================================ */
.tcgp-card-image {
    position: relative;
    aspect-ratio: 5 / 7;
    background: linear-gradient(135deg, var(--tcgp-surface) 0%, var(--tcgp-border) 100%);
    overflow: hidden;
}

.tcgp-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 2;
}

.tcgp-card-item:hover .tcgp-card-image::before {
    left: 100%;
}

.tcgp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--tcgp-transition-slow);
}

.tcgp-card-item:hover .tcgp-card-image img {
    transform: scale(1.08);
}

.tcgp-card-image .tcgp-no-image,
.tcgp-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--tcgp-text-muted);
    font-size: 48px;
    background: linear-gradient(135deg, var(--tcgp-surface) 0%, var(--tcgp-border) 100%);
}

/* ============================================
   CARD BADGES - Modern Pills
   ============================================ */
.tcgp-card-badges {
    position: absolute;
    top: var(--tcgp-space-sm);
    right: var(--tcgp-space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

.tcgp-badge {
    padding: 4px 10px;
    border-radius: var(--tcgp-radius-full);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tcgp-text-inverse);
    box-shadow: var(--tcgp-shadow-sm);
}

.tcgp-badge-ex {
    background: linear-gradient(135deg, #FF6B35 0%, #F7C143 100%);
}

.tcgp-badge-mega {
    background: linear-gradient(135deg, #9F7AEA 0%, #ED64A6 100%);
}

.tcgp-badge-shiny {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Rarity Symbol */
.tcgp-card-rarity-symbol {
    position: absolute;
    bottom: var(--tcgp-space-sm);
    right: var(--tcgp-space-sm);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: var(--tcgp-radius-full);
    font-size: 12px;
    color: var(--tcgp-accent);
    z-index: 5;
}

/* ============================================
   CARD INFO SECTION
   ============================================ */
.tcgp-card-info {
    padding: var(--tcgp-space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-xs);
}

/* Card Header (Name + HP) */
.tcgp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--tcgp-space-sm);
    margin-bottom: var(--tcgp-space-xs);
}

.tcgp-card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--tcgp-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.tcgp-card-name a {
    color: inherit;
    text-decoration: none;
    transition: var(--tcgp-transition-fast);
}

.tcgp-card-name a:hover {
    color: var(--tcgp-primary);
}

.tcgp-card-hp {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
}

.tcgp-hp-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--tcgp-danger);
}

.tcgp-hp-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--tcgp-text-muted);
}

/* Card Meta */
.tcgp-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tcgp-space-xs);
}

.tcgp-card-code {
    font-size: 11px;
    color: var(--tcgp-text-muted);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

/* Type Icons */
.tcgp-card-types {
    display: flex;
    gap: 4px;
    margin-bottom: var(--tcgp-space-xs);
}

.tcgp-type-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--tcgp-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--tcgp-text-inverse);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: var(--tcgp-transition-fast);
    position: relative;
    z-index: 15;
}

.tcgp-type-icon:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.tcgp-type-icon.small {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

/* Stage & Trainer Type */
.tcgp-card-stage,
.tcgp-card-trainer-type {
    font-size: 11px;
    color: var(--tcgp-text-secondary);
}

.tcgp-card-stage a,
.tcgp-stage-link {
    color: var(--tcgp-text-secondary);
    text-decoration: none;
    padding: 2px 8px;
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-sm);
    transition: var(--tcgp-transition-fast);
    position: relative;
    z-index: 15;
}

.tcgp-card-stage a:hover,
.tcgp-stage-link:hover {
    background: var(--tcgp-primary);
    color: var(--tcgp-text-inverse);
}

/* Expansion Link */
.tcgp-card-expansion {
    margin-top: auto;
}

.tcgp-expansion-link {
    font-size: 11px;
    color: var(--tcgp-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--tcgp-transition-fast);
    position: relative;
    z-index: 15;
}

.tcgp-expansion-link:hover {
    color: var(--tcgp-primary);
}

.tcgp-expansion-link::before {
    content: '';
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: var(--tcgp-radius-full);
}

/* Card Rarity Text */
.tcgp-card-rarity {
    font-size: 11px;
    color: var(--tcgp-text-muted);
}

/* ============================================
   HOLOGRAPHIC EFFECT FOR RARE CARDS
   ============================================ */
.tcgp-card-item.is-rare .tcgp-card-image::after,
.tcgp-card-item[data-rarity="rare"] .tcgp-card-image::after,
.tcgp-card-item[data-rarity="illustration-rare"] .tcgp-card-image::after,
.tcgp-card-item[data-rarity="super-rare"] .tcgp-card-image::after,
.tcgp-card-item[data-rarity="immersive-rare"] .tcgp-card-image::after,
.tcgp-card-item[data-rarity="crown-rare"] .tcgp-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 215, 0, 0.1) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 215, 0, 0.1) 55%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 200%;
    opacity: 0;
    transition: var(--tcgp-transition);
    pointer-events: none;
    z-index: 3;
}

.tcgp-card-item.is-rare:hover .tcgp-card-image::after,
.tcgp-card-item[data-rarity="rare"]:hover .tcgp-card-image::after,
.tcgp-card-item[data-rarity="illustration-rare"]:hover .tcgp-card-image::after,
.tcgp-card-item[data-rarity="super-rare"]:hover .tcgp-card-image::after,
.tcgp-card-item[data-rarity="immersive-rare"]:hover .tcgp-card-image::after,
.tcgp-card-item[data-rarity="crown-rare"]:hover .tcgp-card-image::after {
    opacity: 1;
    animation: holoShine 1.5s ease infinite;
}

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

/* Crown Rare special rainbow effect */
.tcgp-card-item[data-rarity="crown-rare"] .tcgp-card-image::after {
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 0, 0, 0.15) 40%,
        rgba(255, 127, 0, 0.15) 45%,
        rgba(255, 255, 0, 0.15) 50%,
        rgba(0, 255, 0, 0.15) 55%,
        rgba(0, 127, 255, 0.15) 60%,
        rgba(139, 0, 255, 0.15) 65%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 300%;
}

/* EX Cards - Special border glow */
.tcgp-card-item.is-ex {
    position: relative;
}

.tcgp-card-item.is-ex::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #FF6B35, #F7C143, #FF6B35);
    border-radius: var(--tcgp-radius-lg);
    z-index: -1;
    opacity: 0;
    transition: var(--tcgp-transition);
}

.tcgp-card-item.is-ex:hover::before {
    opacity: 1;
}

/* MEGA Cards - Purple border glow */
.tcgp-card-item.is-mega::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #9F7AEA, #ED64A6, #9F7AEA);
    border-radius: var(--tcgp-radius-lg);
    z-index: -1;
    opacity: 0;
    transition: var(--tcgp-transition);
}

.tcgp-card-item.is-mega:hover::before {
    opacity: 1;
}

/* Shiny Rare - Sparkle effect */
.tcgp-card-item[data-rarity="shiny-rare"] .tcgp-card-image::after {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 15%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.5) 0%, transparent 15%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.3) 0%, transparent 30%),
        linear-gradient(
            125deg,
            transparent 0%,
            transparent 40%,
            rgba(255, 215, 0, 0.2) 50%,
            transparent 60%,
            transparent 100%
        );
    background-size: 100% 100%, 100% 100%, 100% 100%, 200% 200%;
}

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

.tcgp-card-item[data-rarity="shiny-rare"]:hover .tcgp-card-image::after {
    animation: holoShine 1.5s ease infinite, sparkle 0.8s ease infinite;
}

/* ============================================
   PAGINATION - Modern Design
   ============================================ */
.tcgp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tcgp-space-lg);
    margin-top: var(--tcgp-space-2xl);
    padding-top: var(--tcgp-space-xl);
    border-top: 1px solid var(--tcgp-border);
}

.tcgp-pagination-inner {
    display: flex;
    gap: var(--tcgp-space-xs);
}

.tcgp-page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 var(--tcgp-space-md);
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius);
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--tcgp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.tcgp-page-btn:hover {
    border-color: var(--tcgp-primary);
    color: var(--tcgp-primary);
    transform: translateY(-2px);
}

.tcgp-page-btn.active {
    background: linear-gradient(135deg, var(--tcgp-primary) 0%, var(--tcgp-primary-dark) 100%);
    border-color: var(--tcgp-primary);
    color: var(--tcgp-text-inverse);
    box-shadow: 0 4px 12px rgba(227, 53, 13, 0.3);
}

.tcgp-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.tcgp-page-info {
    color: var(--tcgp-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

/* ============================================
   SINGLE CARD PAGE - Immersive Design
   ============================================ */
.tcgp-single-card-page {
    padding: var(--tcgp-space-xl) 0;
    min-height: 100vh;
}

.tcgp-single-card {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--tcgp-bg-card);
    border-radius: var(--tcgp-radius-xl);
    box-shadow: var(--tcgp-shadow-lg);
    overflow: hidden;
}

.tcgp-single-card-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--tcgp-space-2xl);
    padding: var(--tcgp-space-2xl);
}

@media (max-width: 900px) {
    .tcgp-single-card-layout {
        grid-template-columns: 1fr;
        gap: var(--tcgp-space-xl);
        padding: var(--tcgp-space-lg);
    }
}

/* Card Image Column */
.tcgp-single-card-image-col {
    position: relative;
}

.tcgp-single-card-image {
    position: sticky;
    top: var(--tcgp-space-lg);
    border-radius: var(--tcgp-radius-lg);
    overflow: hidden;
    box-shadow: var(--tcgp-shadow-xl);
    background: linear-gradient(135deg, var(--tcgp-surface) 0%, var(--tcgp-border) 100%);
    transition: var(--tcgp-transition);
}

.tcgp-single-card-image:hover {
    transform: scale(1.02) rotateY(-5deg);
    box-shadow:
        var(--tcgp-shadow-xl),
        0 0 60px rgba(0, 0, 0, 0.2);
}

.tcgp-single-card-image img,
.tcgp-card-img {
    width: 100%;
    display: block;
    border-radius: var(--tcgp-radius-lg);
}

.tcgp-single-card-image .tcgp-card-placeholder.large {
    aspect-ratio: 5 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: var(--tcgp-text-muted);
}

/* Single Card Badges */
.tcgp-single-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-sm);
    margin-top: var(--tcgp-space-md);
    justify-content: center;
}

.tcgp-single-card-badges .tcgp-badge {
    padding: 8px 16px;
    font-size: 12px;
}

/* Card Details Column */
.tcgp-single-card-details {
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-lg);
}

/* Header Section */
.tcgp-single-card-header {
    margin-bottom: var(--tcgp-space-md);
}

.tcgp-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tcgp-space-md);
    margin-bottom: var(--tcgp-space-sm);
}

.tcgp-single-card-name {
    margin: 0;
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 800;
    color: var(--tcgp-text);
    line-height: 1.2;
}

.tcgp-single-card-hp {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: var(--tcgp-space-sm) var(--tcgp-space-md);
    background: linear-gradient(135deg, var(--tcgp-danger) 0%, #C53030 100%);
    border-radius: var(--tcgp-radius);
    flex-shrink: 0;
}

.tcgp-single-card-hp .hp-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--tcgp-text-inverse);
}

.tcgp-single-card-hp .hp-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

/* Card Meta Line */
.tcgp-single-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tcgp-space-md);
}

.tcgp-single-card-meta .tcgp-card-code {
    font-size: 14px;
    color: var(--tcgp-text-muted);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: var(--tcgp-surface);
    padding: 4px 10px;
    border-radius: var(--tcgp-radius-sm);
}

.tcgp-card-expansion-link,
.tcgp-card-rarity-link {
    font-size: 14px;
    color: var(--tcgp-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--tcgp-transition-fast);
}

.tcgp-card-expansion-link:hover,
.tcgp-card-rarity-link:hover {
    color: var(--tcgp-primary);
}

.tcgp-rarity-symbol {
    margin-right: 4px;
    color: var(--tcgp-accent);
}

/* Type Badges */
.tcgp-single-card-types {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-md);
}

.tcgp-single-card-types label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tcgp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tcgp-types-list {
    display: flex;
    gap: var(--tcgp-space-sm);
}

.tcgp-type-badge {
    padding: 8px 18px;
    border-radius: var(--tcgp-radius-full);
    font-size: 13px;
    font-weight: 700;
    color: var(--tcgp-text-inverse);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: var(--tcgp-shadow-sm);
    transition: var(--tcgp-transition);
}

.tcgp-type-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--tcgp-shadow-md);
}

/* Pack Badges */
.tcgp-single-card-packs {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-md);
    margin-top: var(--tcgp-space-sm);
}

.tcgp-single-card-packs label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tcgp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tcgp-packs-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-sm);
}

.tcgp-pack-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--tcgp-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--tcgp-text);
    background: var(--tcgp-bg-card);
    border: 2px solid var(--tcgp-border);
    text-decoration: none;
    transition: var(--tcgp-transition);
}

.tcgp-pack-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--tcgp-shadow-md);
    border-color: var(--tcgp-primary);
    color: var(--tcgp-primary);
}

/* Evolution Section */
.tcgp-single-card-evolution {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-lg);
    padding: var(--tcgp-space-md);
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius);
}

.tcgp-evolution-stage,
.tcgp-evolves-from,
.tcgp-evolves-to {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
}

.tcgp-single-card-evolution label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tcgp-text-muted);
    text-transform: uppercase;
}

.tcgp-single-card-evolution a,
.tcgp-single-card-evolution span {
    font-size: 14px;
    font-weight: 600;
    color: var(--tcgp-text);
}

.tcgp-single-card-evolution a {
    color: var(--tcgp-secondary);
    text-decoration: none;
}

.tcgp-single-card-evolution a:hover {
    color: var(--tcgp-primary);
}

/* Section Titles */
.tcgp-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--tcgp-space-md) 0;
    padding-bottom: var(--tcgp-space-sm);
    color: var(--tcgp-text);
    border-bottom: 3px solid var(--tcgp-primary);
    display: inline-block;
}

/* ============================================
   ABILITIES - Glowing Card Style
   ============================================ */
.tcgp-single-card-abilities {
    margin-bottom: var(--tcgp-space-md);
}

.tcgp-ability {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 2px solid var(--tcgp-warning);
    border-radius: var(--tcgp-radius-lg);
    padding: var(--tcgp-space-lg);
    margin-bottom: var(--tcgp-space-md);
    position: relative;
    overflow: hidden;
}

.tcgp-ability::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    opacity: 0;
    transition: var(--tcgp-transition);
}

.tcgp-ability:hover::before {
    opacity: 1;
}

.tcgp-ability-header {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
    margin-bottom: var(--tcgp-space-sm);
}

.tcgp-ability-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tcgp-text-inverse);
    background: var(--tcgp-warning);
    padding: 4px 10px;
    border-radius: var(--tcgp-radius-full);
}

.tcgp-ability-name {
    font-weight: 800;
    font-size: 16px;
    color: #92400E;
}

.tcgp-ability-text {
    font-size: 14px;
    color: #78350F;
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   ATTACKS - Game-style Cards
   ============================================ */
.tcgp-single-card-attacks {
    margin-bottom: var(--tcgp-space-md);
}

.tcgp-attack {
    background: var(--tcgp-bg-card);
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-lg);
    padding: var(--tcgp-space-lg);
    margin-bottom: var(--tcgp-space-md);
    transition: var(--tcgp-transition);
}

.tcgp-attack:hover {
    border-color: var(--tcgp-primary);
    box-shadow: var(--tcgp-shadow-md);
    transform: translateX(4px);
}

.tcgp-attack-header {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-md);
    margin-bottom: var(--tcgp-space-sm);
}

.tcgp-attack-cost {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.tcgp-attack-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--tcgp-text);
    flex: 1;
}

.tcgp-attack-damage {
    font-size: 28px;
    font-weight: 900;
    color: var(--tcgp-danger);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.tcgp-damage-mod {
    font-size: 16px;
    color: var(--tcgp-text-secondary);
}

.tcgp-attack-text {
    font-size: 14px;
    color: var(--tcgp-text-secondary);
    line-height: 1.6;
    margin: var(--tcgp-space-sm) 0 0 0;
    padding-top: var(--tcgp-space-sm);
    border-top: 1px solid var(--tcgp-border-light);
}

/* Energy Icons */
.tcgp-energy-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--tcgp-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--tcgp-text-inverse);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   STATS SECTION (Weakness, Retreat)
   ============================================ */
.tcgp-single-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-xl);
    padding: var(--tcgp-space-lg);
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-lg);
}

.tcgp-single-card-stats .tcgp-stat-item {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
}

.tcgp-single-card-stats label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tcgp-text-muted);
    text-transform: uppercase;
}

.tcgp-weakness-mod {
    font-size: 14px;
    font-weight: 700;
    color: var(--tcgp-danger);
}

.tcgp-retreat-cost {
    display: flex;
    gap: 4px;
}

/* Stats Grid (for shortcode) */
.tcgp-stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--tcgp-space-md);
    margin-bottom: var(--tcgp-space-xl);
    padding: var(--tcgp-space-lg);
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-lg);
}

.tcgp-stats-section .tcgp-stat-item {
    text-align: center;
}

.tcgp-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--tcgp-text);
}

.tcgp-stat-name {
    font-size: 11px;
    color: var(--tcgp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   SEARCH BOX - Modern Design
   ============================================ */
.tcgp-search-box {
    position: relative;
    max-width: 500px;
}

.tcgp-search-input {
    width: 100%;
    padding: 14px 50px 14px 20px;
    border: 2px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-full);
    font-size: 15px;
    background: var(--tcgp-bg-card);
    color: var(--tcgp-text);
    transition: var(--tcgp-transition);
}

.tcgp-search-input::placeholder {
    color: var(--tcgp-text-muted);
}

.tcgp-search-input:hover {
    border-color: var(--tcgp-text-muted);
}

.tcgp-search-input:focus {
    border-color: var(--tcgp-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(227, 53, 13, 0.1);
}

.tcgp-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: linear-gradient(135deg, var(--tcgp-primary) 0%, var(--tcgp-primary-dark) 100%);
    border-radius: var(--tcgp-radius-full);
    color: var(--tcgp-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tcgp-transition);
}

.tcgp-search-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(227, 53, 13, 0.3);
}

.tcgp-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--tcgp-bg-card);
    border: 1px solid var(--tcgp-border);
    border-radius: var(--tcgp-radius-lg);
    box-shadow: var(--tcgp-shadow-lg);
    max-height: 450px;
    overflow-y: auto;
    display: none;
    z-index: var(--tcgp-z-dropdown);
}

.tcgp-search-results.active {
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tcgp-search-result-item {
    display: flex;
    gap: var(--tcgp-space-md);
    padding: var(--tcgp-space-md);
    text-decoration: none;
    color: var(--tcgp-text);
    border-bottom: 1px solid var(--tcgp-border-light);
    transition: var(--tcgp-transition-fast);
}

.tcgp-search-result-item:last-child {
    border-bottom: none;
}

.tcgp-search-result-item:hover {
    background: var(--tcgp-surface);
}

.tcgp-search-result-item img {
    width: 45px;
    height: auto;
    border-radius: var(--tcgp-radius-sm);
    box-shadow: var(--tcgp-shadow-sm);
}

/* ============================================
   BREADCRUMBS - Navigation Trail
   ============================================ */
.tcgp-breadcrumbs {
    margin-bottom: var(--tcgp-space-lg);
}

.tcgp-breadcrumbs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tcgp-space-sm);
}

.tcgp-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
    font-size: 14px;
}

.tcgp-breadcrumb-item:not(:last-child)::after {
    content: '›';
    color: var(--tcgp-text-muted);
    font-size: 16px;
}

.tcgp-breadcrumb-item a {
    color: var(--tcgp-link, #FFFFFF);
    text-decoration: none;
    transition: var(--tcgp-transition-fast);
}

.tcgp-breadcrumb-item a:hover {
    color: var(--tcgp-link-hover, var(--tcgp-primary));
}

.tcgp-breadcrumb-item:last-child span {
    color: var(--tcgp-text);
    font-weight: 600;
}

.tcgp-breadcrumb-item span {
    color: var(--tcgp-text);
}

/* ============================================
   EXPANSIONS GRID - Card Collection Style
   ============================================ */
.tcgp-expansions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--tcgp-space-lg);
}

.tcgp-expansion-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--tcgp-space-xl) var(--tcgp-space-lg);
    background: var(--tcgp-bg-card);
    border-radius: var(--tcgp-radius-lg);
    box-shadow: var(--tcgp-shadow);
    text-decoration: none;
    color: var(--tcgp-text);
    transition: var(--tcgp-transition);
    border: 2px solid transparent;
}

.tcgp-expansion-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tcgp-shadow-lg);
    border-color: var(--tcgp-primary);
}

.tcgp-expansion-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: var(--tcgp-space-md);
    transition: var(--tcgp-transition);
}

.tcgp-expansion-card:hover .tcgp-expansion-icon {
    transform: scale(1.1);
}

.tcgp-expansion-name {
    margin: 0 0 var(--tcgp-space-xs) 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--tcgp-text);
}

.tcgp-expansion-code {
    font-size: 12px;
    color: var(--tcgp-text-muted);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    margin-bottom: var(--tcgp-space-xs);
}

.tcgp-expansion-count {
    font-size: 13px;
    color: var(--tcgp-secondary);
    font-weight: 600;
    padding: 4px 12px;
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-full);
}

/* ============================================
   TRAINER CARD SPECIFIC
   ============================================ */
.tcgp-single-card-trainer-type {
    margin-bottom: var(--tcgp-space-md);
}

.tcgp-trainer-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--tcgp-radius);
    font-size: 14px;
    font-weight: 700;
    color: var(--tcgp-text-inverse);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tcgp-single-card-effect {
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius-lg);
    padding: var(--tcgp-space-lg);
}

.tcgp-single-card-effect p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tcgp-text);
}

/* Description / Flavor Text */
.tcgp-single-card-description {
    margin-top: var(--tcgp-space-md);
}

.tcgp-flavor-text {
    font-style: italic;
    color: var(--tcgp-text-secondary);
    line-height: 1.6;
    padding-left: var(--tcgp-space-md);
    border-left: 3px solid var(--tcgp-border);
    margin: 0;
}

/* Special Rules */
.tcgp-single-card-rules {
    margin-top: var(--tcgp-space-md);
}

.tcgp-rule {
    padding: var(--tcgp-space-md);
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-left: 4px solid var(--tcgp-danger);
    border-radius: 0 var(--tcgp-radius) var(--tcgp-radius) 0;
    margin-bottom: var(--tcgp-space-sm);
}

.tcgp-rule strong {
    color: var(--tcgp-danger);
}

.tcgp-rule span {
    display: block;
    margin-top: var(--tcgp-space-xs);
    color: #991B1B;
    font-size: 14px;
}

/* Extra Info */
.tcgp-single-card-extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcgp-space-lg);
    padding: var(--tcgp-space-lg);
    background: var(--tcgp-surface);
    border-radius: var(--tcgp-radius);
    margin-top: var(--tcgp-space-md);
}

.tcgp-extra-item {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-sm);
}

.tcgp-extra-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tcgp-text-muted);
    text-transform: uppercase;
}

.tcgp-extra-item span {
    font-size: 14px;
    color: var(--tcgp-text);
}

/* ============================================
   RELATED CARDS SECTION
   ============================================ */
.tcgp-related-cards {
    margin-top: var(--tcgp-space-2xl);
    padding-top: var(--tcgp-space-xl);
    border-top: 2px solid var(--tcgp-border);
}

.tcgp-related-cards .tcgp-section-title {
    margin-bottom: var(--tcgp-space-lg);
}

.tcgp-related-cards-more {
    text-align: center;
    margin-top: var(--tcgp-space-xl);
}

/* ============================================
   NO RESULTS & STATES
   ============================================ */
.tcgp-no-results {
    text-align: center;
    padding: var(--tcgp-space-2xl);
    color: var(--tcgp-text-secondary);
    font-size: 16px;
    grid-column: 1 / -1;
}

.tcgp-no-results::before {
    content: '🔍';
    display: block;
    font-size: 48px;
    margin-bottom: var(--tcgp-space-md);
    opacity: 0.5;
}

.tcgp-error {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B;
    padding: var(--tcgp-space-lg);
    border-radius: var(--tcgp-radius-lg);
    text-align: center;
    border: 1px solid #F87171;
}

/* Loading State */
.tcgp-loading {
    text-align: center;
    padding: var(--tcgp-space-2xl);
}

.tcgp-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--tcgp-border);
    border-top-color: var(--tcgp-primary);
    border-radius: var(--tcgp-radius-full);
    animation: tcgp-spin 0.8s linear infinite;
    margin: 0 auto;
}

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

/* Skeleton Loading */
.tcgp-skeleton {
    background: linear-gradient(
        90deg,
        var(--tcgp-surface) 25%,
        var(--tcgp-border) 50%,
        var(--tcgp-surface) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease infinite;
}

@keyframes skeleton-loading {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

/* ============================================
   RESPONSIVE DESIGN - Mobile First
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .tcgp-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--tcgp-space-md);
    }

    .tcgp-single-card-layout {
        grid-template-columns: 320px 1fr;
        gap: var(--tcgp-space-xl);
    }
}

/* Mobile Landscape */
@media (max-width: 768px) {
    :root {
        --tcgp-card-min-width: 140px;
    }

    .tcgp-page,
    .tcgp-cards-wrapper {
        padding: var(--tcgp-space-md);
    }

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

    .tcgp-single-card-layout {
        grid-template-columns: 1fr;
        padding: var(--tcgp-space-lg);
    }

    .tcgp-single-card-image {
        max-width: 300px;
        margin: 0 auto;
    }

    .tcgp-card-title-row {
        flex-direction: column;
        gap: var(--tcgp-space-sm);
    }

    .tcgp-single-card-hp {
        align-self: flex-start;
    }

    .tcgp-single-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tcgp-space-sm);
    }

    .tcgp-filters-panel {
        padding: var(--tcgp-space-md);
    }

    .tcgp-filter-form {
        grid-template-columns: 1fr;
    }

    .tcgp-cards-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tcgp-space-md);
    }

    .tcgp-sort-options {
        justify-content: space-between;
    }

    .tcgp-sort-options select {
        flex: 1;
    }

    .tcgp-attack-header {
        flex-wrap: wrap;
    }

    .tcgp-attack-damage {
        font-size: 24px;
    }

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

    /* Card Item - Touch Friendly */
    .tcgp-card-item:hover {
        transform: none;
    }

    .tcgp-card-item:active {
        transform: scale(0.98);
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    :root {
        --tcgp-card-min-width: 120px;
        --tcgp-space-lg: 16px;
        --tcgp-space-xl: 24px;
    }

    .tcgp-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tcgp-space-sm);
    }

    .tcgp-card-info {
        padding: var(--tcgp-space-sm);
    }

    .tcgp-card-name {
        font-size: 12px;
    }

    .tcgp-card-hp .tcgp-hp-value {
        font-size: 14px;
    }

    .tcgp-card-types {
        display: none;
    }

    .tcgp-toggle-group {
        flex-direction: column;
    }

    .tcgp-toggle-btn {
        padding: var(--tcgp-space-sm);
        font-size: 12px;
    }

    .tcgp-pagination {
        flex-direction: column;
        gap: var(--tcgp-space-md);
    }

    .tcgp-page-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 var(--tcgp-space-sm);
        font-size: 13px;
    }

    .tcgp-single-card-name {
        font-size: 22px;
    }

    .tcgp-single-card-hp .hp-value {
        font-size: 22px;
    }

    .tcgp-attack-damage {
        font-size: 20px;
    }

    .tcgp-expansions-grid {
        grid-template-columns: 1fr;
    }

    .tcgp-breadcrumbs-list {
        font-size: 12px;
    }
}

/* Hover disabled on touch devices */
@media (hover: none) {
    .tcgp-card-item:hover {
        transform: none;
        box-shadow: var(--tcgp-shadow);
    }

    .tcgp-card-item:hover .tcgp-card-image img {
        transform: none;
    }

    .tcgp-card-item:hover .tcgp-card-image::before {
        left: -100%;
    }
}

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

/* Print Styles */
@media print {
    .tcgp-filters-panel,
    .tcgp-pagination,
    .tcgp-search-box {
        display: none !important;
    }

    .tcgp-card-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ============================================
   LAYOUT - Kadence Compatible Structure
   ============================================ */

/* Two-column layout with sidebar */
.tcgp-content-area {
    padding: var(--tcgp-space-lg) 0;
}

.tcgp-content-area .content-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--tcgp-space-xl);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--tcgp-space-lg);
}

.tcgp-content-area .tcgp-main {
    min-width: 0; /* Prevent grid blowout */
}

.tcgp-content-area .content-wrap {
    background: transparent;
}

/* Remove duplicate container styles when inside Kadence */
.tcgp-content-area .tcgp-single-card {
    max-width: 100%;
}

.tcgp-content-area .tcgp-single-card-layout {
    grid-template-columns: 320px 1fr;
}

/* Sidebar Area */
.tcgp-sidebar,
.tcgp-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-lg);
}

/* Style get_sidebar() output from Kadence */
.tcgp-sidebar-wrapper .widget-area,
.tcgp-sidebar-wrapper #secondary {
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-lg);
}

/* ============================================
   SIDEBAR WIDGET - Popular Cards
   ============================================ */
.tcgp-sidebar-widget {
    background: var(--tcgp-bg-card);
    border-radius: var(--tcgp-radius-lg);
    padding: var(--tcgp-space-lg);
    box-shadow: var(--tcgp-shadow);
    border: 1px solid var(--tcgp-border);
}

.tcgp-widget-title {
    margin: 0 0 var(--tcgp-space-md) 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--tcgp-text);
    padding-bottom: var(--tcgp-space-sm);
    border-bottom: 3px solid var(--tcgp-primary);
    display: inline-block;
}

.tcgp-widget-cards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tcgp-space-sm);
}

.tcgp-widget-card-item {
    margin: 0;
    padding: 0;
}

.tcgp-widget-card-link {
    display: flex;
    align-items: center;
    gap: var(--tcgp-space-md);
    padding: var(--tcgp-space-sm);
    border-radius: var(--tcgp-radius);
    text-decoration: none;
    color: var(--tcgp-text);
    transition: var(--tcgp-transition);
    background: var(--tcgp-surface);
    border: 1px solid transparent;
}

.tcgp-widget-card-link:hover {
    background: var(--tcgp-bg-elevated);
    border-color: var(--tcgp-primary);
    transform: translateX(4px);
    box-shadow: var(--tcgp-shadow-sm);
}

.tcgp-widget-card-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 70px;
    border-radius: var(--tcgp-radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--tcgp-surface) 0%, var(--tcgp-border) 100%);
    box-shadow: var(--tcgp-shadow-sm);
}

.tcgp-widget-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--tcgp-transition);
}

.tcgp-widget-card-link:hover .tcgp-widget-card-thumb img {
    transform: scale(1.1);
}

.tcgp-widget-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tcgp-widget-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tcgp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcgp-widget-card-expansion {
    font-size: 11px;
    color: var(--tcgp-text-muted);
}

.tcgp-widget-view-all {
    display: block;
    text-align: center;
    padding: var(--tcgp-space-sm) var(--tcgp-space-md);
    margin-top: var(--tcgp-space-md);
    color: var(--tcgp-secondary, #1a73e8) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--tcgp-radius);
    transition: var(--tcgp-transition);
    background: var(--tcgp-surface, #f5f5f5);
}

.tcgp-widget-view-all:hover {
    background: var(--tcgp-primary, #1a73e8) !important;
    color: #fff !important;
}

/* ============================================
   RESPONSIVE - Sidebar Layout
   ============================================ */
@media (max-width: 1100px) {
    .tcgp-content-area .content-container {
        grid-template-columns: 1fr 280px;
        gap: var(--tcgp-space-lg);
    }

    .tcgp-content-area .tcgp-single-card-layout {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 900px) {
    .tcgp-content-area .content-container {
        grid-template-columns: 1fr;
    }

    .tcgp-content-area .tcgp-single-card-layout {
        grid-template-columns: 1fr;
    }

    .tcgp-sidebar {
        order: 2;
    }

    /* Horizontal widget layout on tablet */
    .tcgp-widget-cards-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tcgp-widget-card-item {
        flex: 0 1 calc(33.333% - var(--tcgp-space-sm));
    }

    .tcgp-widget-card-link {
        flex-direction: column;
        text-align: center;
        padding: var(--tcgp-space-md);
    }

    .tcgp-widget-card-thumb {
        width: 80px;
        height: 112px;
    }
}

@media (max-width: 600px) {
    .tcgp-content-area .content-container {
        padding: 0 var(--tcgp-space-md);
    }

    .tcgp-widget-card-item {
        flex: 0 1 calc(50% - var(--tcgp-space-sm));
    }

    .tcgp-widget-card-thumb {
        width: 60px;
        height: 84px;
    }
}

@media (max-width: 400px) {
    .tcgp-widget-cards-list {
        flex-direction: column;
    }

    .tcgp-widget-card-item {
        flex: 1 1 100%;
    }

    .tcgp-widget-card-link {
        flex-direction: row;
        text-align: left;
    }

    .tcgp-widget-card-thumb {
        width: 50px;
        height: 70px;
    }
}

/* ==========================================================================
   TCG POCKET ICONS
   ========================================================================== */

/* Icon Size Classes */
.tcgp-icon-small {
    width: 16px;
    height: 16px;
}

.tcgp-icon-medium {
    width: 24px;
    height: 24px;
}

.tcgp-icon-large {
    width: 32px;
    height: 32px;
}

/* Energy Icons */
.tcgp-energy-icon {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: contain;
}

.tcgp-energy-cost {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tcgp-energy-cost .tcgp-energy-icon {
    width: 20px;
    height: 20px;
}

/* Type Icons */
.tcgp-type-icon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.tcgp-type-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.tcgp-type-link:hover {
    transform: scale(1.1);
}

.tcgp-types-list {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.tcgp-card-types {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tcgp-card-types .tcgp-type-icon {
    width: 20px;
    height: 20px;
}

/* Rarity Icons */
.tcgp-rarity-icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tcgp-rarity-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.tcgp-card-rarity-symbol {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 4px 6px;
}

.tcgp-card-rarity-symbol .tcgp-rarity-icon {
    width: 14px;
    height: 14px;
}

.tcgp-card-rarity-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.tcgp-card-rarity-link:hover {
    opacity: 0.8;
}

.tcgp-rarity-name {
    font-size: 0.9em;
}

/* Badge Icons */
.tcgp-badge-icon {
    width: 28px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.tcgp-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.tcgp-card-badges .tcgp-badge-icon {
    width: 24px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.tcgp-card-badges .tcgp-rarity-icons {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 2px 4px;
}

/* Status Icons */
.tcgp-status-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

/* Weakness Display */
.tcgp-weakness-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tcgp-weakness-display .tcgp-type-icon {
    width: 20px;
    height: 20px;
}

.tcgp-weakness-mod {
    font-weight: 600;
    color: var(--tcgp-text-secondary, #666);
}

/* Retreat Cost */
.tcgp-retreat-cost {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tcgp-retreat-cost .tcgp-energy-icon {
    width: 18px;
    height: 18px;
}

.tcgp-retreat-free {
    font-weight: 600;
    color: var(--tcgp-text-muted, #999);
}

/* Attack Energy Cost */
.tcgp-attack-cost {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.tcgp-attack-cost .tcgp-energy-icon {
    width: 22px;
    height: 22px;
}

/* Single Card Page Specifics */
.tcgp-single-card-types .tcgp-type-icon {
    width: 28px;
    height: 28px;
}

.tcgp-single-card-stats .tcgp-type-icon {
    width: 24px;
    height: 24px;
}

/* Dark Mode Overrides for Icons */
.dark .tcgp-card-rarity-symbol,
[data-theme="dark"] .tcgp-card-rarity-symbol {
    background: rgba(0, 0, 0, 0.7);
}

.dark .tcgp-weakness-mod,
[data-theme="dark"] .tcgp-weakness-mod {
    color: var(--tcgp-text-secondary, #aaa);
}

/* Responsive Icon Sizes */
@media (max-width: 768px) {
    .tcgp-icon-medium {
        width: 20px;
        height: 20px;
    }

    .tcgp-icon-large {
        width: 28px;
        height: 28px;
    }

    .tcgp-single-card-types .tcgp-type-icon {
        width: 24px;
        height: 24px;
    }

    .tcgp-attack-cost .tcgp-energy-icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .tcgp-rarity-icon {
        width: 14px;
        height: 14px;
    }

    .tcgp-card-badges .tcgp-badge-icon {
        width: 20px;
    }

    .tcgp-energy-cost .tcgp-energy-icon {
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   Deck Widget - Tier Thumbnail Styles
   Uses same structure as cards widget
   ============================================ */
.tcgp-widget-deck-tier-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--tcgp-radius, 6px);
    background: var(--tcgp-surface, #f0f0f0);
    flex-shrink: 0;
}

.tcgp-widget-deck-tier-thumb .tcgp-tier-letter {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.tcgp-widget-deck-tier-thumb .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--tcgp-text-muted, #999);
}

/* Tier colors */
.tcgp-widget-deck-tier-thumb.tier-s {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
}
.tcgp-widget-deck-tier-thumb.tier-s .tcgp-tier-letter { color: #333; }

.tcgp-widget-deck-tier-thumb.tier-a {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
}
.tcgp-widget-deck-tier-thumb.tier-a .tcgp-tier-letter { color: #333; }

.tcgp-widget-deck-tier-thumb.tier-b {
    background: linear-gradient(135deg, #cd7f32, #a05a20);
}

.tcgp-widget-deck-tier-thumb.tier-c {
    background: #607d8b;
}

.tcgp-widget-deck-tier-thumb.tier-d {
    background: #9e9e9e;
}

/* ============================================
   Taxonomy Page Header - Clean Layout
   ============================================ */
.tcgp-taxonomy-header {
    margin-bottom: var(--tcgp-space-lg, 24px);
}

.tcgp-taxonomy-header .tcgp-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tcgp-text, #1A1D26);
}

.tcgp-taxonomy-header .tcgp-page-title .tcgp-type-icon {
    flex-shrink: 0;
}

.tcgp-taxonomy-header .tcgp-results-count {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--tcgp-text-muted, #8B919A);
}

.tcgp-taxonomy-header .tcgp-page-description {
    margin: 0;
    font-size: 15px;
    color: var(--tcgp-text-secondary, #5C6370);
}

/* ==========================================================================
   1.4.0 (28/09/2026) — CORREZIONI E RITOCCHI
   Link leggibili nel tema chiaro, pannello filtri ordinato (anche su telefono), pillole leggibili,
   spazi regolari nella scheda della carta. Le regole stanno qui, in un punto solo.
   ========================================================================== */

/* Link a forma di pulsante: testo chiaro sul colore del pulsante (la regola generale dei link è più forte) */
.tcgp-content-area a.tcgp-btn-primary,
.tcgp-page a.tcgp-btn-primary,
.tcgp-cards-wrapper a.tcgp-btn-primary,
.tcgp-content-area a.tcgp-btn-primary:hover,
.tcgp-page a.tcgp-btn-primary:hover {
    color: var(--tcgp-text-inverse);
}

.tcgp-btn-secondary,
.tcgp-content-area a.tcgp-btn-secondary,
.tcgp-page a.tcgp-btn-secondary,
.tcgp-cards-wrapper a.tcgp-btn-secondary,
.tcgp-content-area a.tcgp-btn-secondary:hover,
.tcgp-page a.tcgp-btn-secondary:hover {
    color: var(--tcgp-on-secondary);
}

.tcgp-content-area a.tcgp-btn-reset,
.tcgp-page a.tcgp-btn-reset {
    color: var(--tcgp-text);
}

/* --- Pannello filtri ---------------------------------------------------- */

/* La ricerca in alto a tutta larghezza, i filtri sotto su una griglia regolare (prima: ricerca a sinistra, tutti i
   filtri impilati in una colonna a destra) */
.tcgp-filters-collapsible .tcgp-filter-form {
    display: block;
}

.tcgp-filters-collapsible .tcgp-filter-always-visible {
    margin-bottom: 0;
}

.tcgp-filters-collapsible.is-expanded .tcgp-filters-advanced {
    display: block;
    margin-top: var(--tcgp-space-lg);
}

.tcgp-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 20px 28px;
    align-items: start;
}

.tcgp-filter-grid .tcgp-filter-group {
    gap: 8px;
    min-width: 0;
}

.tcgp-filter-grid .tcgp-filter-group--wide {
    grid-column: 1 / -1;
}

.tcgp-filter-grid .tcgp-filter-label {
    font-size: 12px;
    line-height: 1.3;
}

.tcgp-filter-grid .tcgp-filter-select,
.tcgp-filter-grid .tcgp-filter-input {
    width: 100%;
    padding: 9px 12px;
    border-width: 1px;
    font-size: 14px;
}

.tcgp-filter-grid .tcgp-range-group .tcgp-range-input {
    width: auto;
    flex: 1;
    min-width: 0;
}

/* Tutti / Sì / No: sempre su una riga, anche su telefono */
.tcgp-filter-grid .tcgp-toggle-group {
    flex-direction: row;
}

.tcgp-filter-grid .tcgp-toggle-btn {
    padding: 8px 10px;
    font-size: 13px;
}

/* Buste raggruppate per serie */
.tcgp-chips-series + .tcgp-chips-series {
    margin-top: 12px;
}

.tcgp-chips-series-title {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tcgp-text-muted);
}

/* Pillole: sfondo neutro e testo normale; il colore del tipo è un pallino. Scelta: piena, con il testo che si legge. */
.tcgp-filter-grid .tcgp-chip {
    gap: 6px;
    padding: 6px 12px;
    opacity: 1;
    transform: none;
    background: var(--tcgp-surface);
    border: 1px solid var(--tcgp-border);
    box-shadow: none;
}

.tcgp-filter-grid .tcgp-chip:hover {
    opacity: 1;
    transform: none;
    border-color: var(--tcgp-text-muted);
}

.tcgp-filter-grid .tcgp-chip:not(.tcgp-chip--neutral)::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color);
    flex-shrink: 0;
}

.tcgp-filter-grid .tcgp-chip .tcgp-chip-label {
    color: var(--tcgp-text);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}

.tcgp-filter-grid .tcgp-chip.selected,
.tcgp-filter-grid .tcgp-chip:has(input:checked) {
    transform: none;
    background: var(--chip-color, var(--tcgp-primary));
    border-color: var(--chip-color, var(--tcgp-primary));
    box-shadow: none;
}

.tcgp-filter-grid .tcgp-chip.selected .tcgp-chip-label,
.tcgp-filter-grid .tcgp-chip:has(input:checked) .tcgp-chip-label {
    color: var(--chip-text, var(--tcgp-text-inverse));
}

.tcgp-filter-grid .tcgp-chip:has(input:checked)::before {
    box-shadow: 0 0 0 2px var(--chip-text, var(--tcgp-text-inverse));
}

.tcgp-filter-grid .tcgp-chip:has(input:focus-visible) {
    outline: 2px solid var(--tcgp-primary);
    outline-offset: 2px;
}

.tcgp-filters-collapsible .tcgp-filter-actions {
    margin-top: var(--tcgp-space-lg);
    padding-top: var(--tcgp-space-md);
}

/* Pannello chiuso senza la ricerca (pagine per espansione, tipo…): niente spazio vuoto sotto il titolo */
.tcgp-filters-collapsible:not(.is-expanded):not(:has(.tcgp-filter-always-visible)) .tcgp-filters-header {
    margin-bottom: 0;
}

.tcgp-filters-collapsible:not(.is-expanded):not(:has(.tcgp-filter-always-visible)) {
    padding-top: var(--tcgp-space-md);
    padding-bottom: var(--tcgp-space-md);
}

.tcgp-archive-sidebar .tcgp-related-terms {
    margin-bottom: var(--tcgp-space-lg);
}

.tcgp-filters-collapsible .tcgp-filter-actions .tcgp-btn {
    padding: 10px 22px;
}

/* --- Scheda della carta: spazi regolari fra i blocchi -------------------- */

.tcgp-single-card .tcgp-single-card-details {
    gap: 20px;
}

.tcgp-single-card .tcgp-single-card-details > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* l'ultimo attacco (o abilità) non aggiunge il suo margine allo spazio fra i blocchi */
.tcgp-single-card .tcgp-single-card-details > * > :last-child {
    margin-bottom: 0;
}

/* --- Telefono ------------------------------------------------------------ */

@media (max-width: 600px) {
    .tcgp-filter-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tcgp-filters-collapsible.is-expanded .tcgp-filters-advanced {
        margin-top: var(--tcgp-space-md);
    }

    .tcgp-filters-collapsible .tcgp-filter-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: var(--tcgp-space-md) calc(-1 * var(--tcgp-space-md)) calc(-1 * var(--tcgp-space-md));
        padding: var(--tcgp-space-sm) var(--tcgp-space-md);
        background: var(--tcgp-bg-card);
        border-radius: 0 0 var(--tcgp-radius-lg) var(--tcgp-radius-lg);
    }

    .tcgp-filters-collapsible .tcgp-filter-actions .tcgp-btn {
        flex: 1;
    }

    .tcgp-pagination {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--tcgp-space-sm);
    }

    .tcgp-single-card .tcgp-single-card-details {
        gap: 16px;
    }
}