/* ============================================
   ARTICLE TEMPLATE STYLES - Dark Mode Default
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0f0f0f;
    color: #f0f0f0;
    line-height: 1.6;
}

/* Navigation */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1f1f1f;
    padding: 0 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.navbar-logo img {
    max-height: 60px;
    width: auto;
    transition: transform 0.3s ease;
}

.navbar-logo img:hover {
    transform: scale(1.1);
}

.navbar-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.navbar-links a {
    color: #f0f0f0;
    text-decoration: none;
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-links a:hover {
    background-color: rgba(240, 240, 240, 0.1);
}

.hamburger {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #f0f0f0;
    cursor: pointer;
}

/* Article Container */
.article-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #9a9a9a;
}

.breadcrumbs a {
    color: #00B337;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span {
    margin: 0 8px;
    color: #666;
}

/* Article Header */
.article-header {
    margin-bottom: 2rem;
}

.article-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #f0f0f0;
    line-height: 1.2;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.9rem;
    color: #9a9a9a;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.article-meta .reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.article-meta #author-name,
.article-meta a {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
}

.article-meta .updated-date {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Introduction */
.article-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 2rem;
}

.article-intro p {
    margin-bottom: 1rem;
}

/* Visual Anchor - Card Grid */
.visual-anchor {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.2);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Featured Cards Grid - 5x1 format (5 cards in a single row) */
#featured-cards-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.card-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.card-item:hover {
    transform: translateY(-5px);
}

.card-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.card-item a {
    display: block;
    text-decoration: none;
}

/* STANDARDIZED: Match deck-breakdown-card-price exactly */
.card-price {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.85);
    color: #00B337;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
}

/* Spotlight Products Section - Two styles: simple and detailed */
.spotlight-products-container {
    margin-top: 1.5rem;
}

/* Simple Style - Horizontal cards with prices below */
.spotlight-products-container.spotlight-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.spotlight-product-simple {
    text-align: center;
}

.spotlight-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.spotlight-product-link:hover {
    transform: translateY(-4px);
}

.spotlight-product-image-simple {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 2px solid rgba(0, 179, 55, 0.3);
    transition: border-color 0.2s ease;
}

.spotlight-product-link:hover .spotlight-product-image-simple {
    border-color: rgba(0, 179, 55, 0.6);
}

.spotlight-product-image-simple img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spotlight-product-price-simple {
    color: #00B337;
    font-size: 1rem;
    font-weight: 600;
}

/* Detailed Style - Card with buy button and tabs */
.spotlight-products-container.spotlight-detailed {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.spotlight-product-detailed {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid rgba(0, 179, 55, 0.3);
}

.spotlight-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.spotlight-product-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f0f0f0;
    flex: 1;
}

.spotlight-buy-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #00B337;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.spotlight-buy-button:hover {
    background: #00d644;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 179, 55, 0.3);
}

.spotlight-product-set {
    color: #9a9a9a;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.spotlight-product-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
}

.spotlight-product-image-detailed {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.spotlight-product-image-detailed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spotlight-product-details {
    flex: 1;
}

.spotlight-product-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.spotlight-tab {
    background: none;
    border: none;
    color: #9a9a9a;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.spotlight-tab:hover {
    color: #f0f0f0;
}

.spotlight-tab.active {
    color: #00B337;
    border-bottom-color: #00B337;
}

.spotlight-tab-content {
    display: none;
    padding: 1rem 0;
}

.spotlight-tab-content.active {
    display: block;
}

.spotlight-product-description {
    color: #d0d0d0;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.spotlight-price-points {
    margin-bottom: 1rem;
}

.price-point-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price-point-row:last-child {
    border-bottom: none;
}

.price-point-label {
    color: #9a9a9a;
}

.price-point-value {
    color: #00B337;
    font-weight: 600;
}

.spotlight-price-change-detailed {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Responsive: Spotlight products on mobile */
@media (max-width: 768px) {
    .spotlight-products-container.spotlight-simple {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
    }
    
    .spotlight-product-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .spotlight-product-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .spotlight-buy-button {
        width: 100%;
        justify-content: center;
    }
    
    .spotlight-product-image-detailed {
        max-width: 250px;
        margin: 0 auto;
    }
}
    text-align: left;
    z-index: 100;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.card-loading {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

/* Content Sections */
.article-section {
    margin: 3rem 0;
}

#card-type-chart-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.article-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #00B337;
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
    padding-bottom: 0.5rem;
}

.article-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: #f0f0f0;
}

.article-section p {
    margin-bottom: 1rem;
    color: #e0e0e0;
    line-height: 1.8;
}

.article-section ul, .article-section ol {
    margin: 1rem 0 1rem 2rem;
    color: #e0e0e0;
}

.article-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Key Cards Section */
/* Enhanced Key Card Styles */
.key-card {
    display: flex;
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 4px solid #00B337;
    position: relative;
    transition: all 0.3s ease;
}

.key-card.enhanced {
    border: 2px solid rgba(0, 179, 55, 0.3);
    border-left: 4px solid #00B337;
}

.key-card.enhanced:hover {
    border-color: rgba(0, 179, 55, 0.6);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 179, 55, 0.2);
}

.key-card-number {
    position: absolute;
    top: -10px;
    right: 1.5rem;
    background: #00B337;
    color: #0f0f0f;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #0f0f0f;
}

.key-card-image {
    flex-shrink: 0;
    width: 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.key-card-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.key-card-image:hover img {
    transform: scale(1.05);
}

.key-card-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 179, 55, 0.9), transparent);
    padding: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.key-card-image:hover .key-card-image-overlay {
    opacity: 1;
}

/* STANDARDIZED: Match deck-breakdown-card-price exactly */
.key-card-price-tag {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.85);
    color: #00B337;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    text-align: left;
    z-index: 100;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.key-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.key-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.key-card-title {
    font-size: 1.4rem;
    margin: 0;
    color: #f0f0f0;
    flex: 1;
}

.key-card-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(0, 179, 55, 0.2);
    border: 1px solid #00B337;
    border-radius: 6px;
    color: #00B337;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.key-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.key-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #9a9a9a;
    font-size: 0.9rem;
}

.key-card-stats span i {
    color: #00B337;
}

.key-card-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.key-card-section {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid #00B337;
}

.key-card-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00B337;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}

.key-card-section h5 i {
    font-size: 0.9rem;
}

.key-card-section p {
    margin: 0;
    color: #e0e0e0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.key-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.key-card-buy-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #00B337;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: 2px solid #00B337;
}

.key-card-buy-button:hover {
    background: #00d044;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 179, 55, 0.4);
}

.key-card-buy-button i {
    font-size: 0.9rem;
}

.key-card-content .card-price-badge {
    display: inline-block;
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Strengths/Weaknesses */
/* Enhanced Strengths & Weaknesses */
.pros-cons-enhanced {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.pros-enhanced, .cons-enhanced {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid;
}

.pros-enhanced {
    border-color: rgba(0, 179, 55, 0.3);
}

.cons-enhanced {
    border-color: rgba(228, 0, 124, 0.3);
}

.pros-header, .cons-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid;
}

.pros-header {
    background: rgba(0, 179, 55, 0.1);
    border-color: rgba(0, 179, 55, 0.3);
}

.cons-header {
    background: rgba(228, 0, 124, 0.1);
    border-color: rgba(228, 0, 124, 0.3);
}

.pros-header i {
    font-size: 1.5rem;
    color: #00B337;
}

.cons-header i {
    font-size: 1.5rem;
    color: #e4007c;
}

.pros-header h3, .cons-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #f0f0f0;
}

.strength-items, .weakness-items {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.strength-item, .weakness-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.strength-item {
    border-color: #00B337;
}

.weakness-item {
    border-color: #e4007c;
}

.strength-item:hover, .weakness-item:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(4px);
}

.strength-icon, .weakness-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.strength-icon {
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
}

.weakness-icon {
    background: rgba(228, 0, 124, 0.2);
    color: #e4007c;
}

.strength-content, .weakness-content {
    flex: 1;
}

.strength-content h4, .weakness-content h4 {
    margin: 0 0 0.5rem 0;
    color: #f0f0f0;
    font-size: 1.1rem;
}

.strength-content p, .weakness-content p {
    margin: 0;
    color: #9a9a9a;
    line-height: 1.6;
    font-size: 0.95rem;
}

.weakness-solution {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 179, 55, 0.1);
    border-left: 2px solid #00B337;
    border-radius: 4px;
    font-size: 0.9rem;
}

.weakness-solution strong {
    color: #00B337;
}

/* Legacy Pros/Cons (keep for backward compatibility) */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.pros, .cons {
    padding: 1.5rem;
    border-radius: 8px;
}

.pros {
    background: rgba(0, 179, 55, 0.1);
    border: 1px solid rgba(0, 179, 55, 0.3);
}

.cons {
    background: rgba(228, 0, 124, 0.1);
    border: 1px solid rgba(228, 0, 124, 0.3);
}

.pros h4, .cons h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.pros h4 {
    color: #00B337;
}

.cons h4 {
    color: #e4007c;
}

/* Widget Containers - STANDARDIZED */
.widget-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.widget-container:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 179, 55, 0.3);
}

.widget-container h3 {
    margin-bottom: 1rem;
    color: #00B337;
}

.widget-loading {
    text-align: center;
    padding: 2rem;
    color: #666;
}

/* Price Trend Section Controls */
.price-trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.price-trend-header p {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.price-trend-controls {
    display: flex;
    gap: 0.5rem;
}

/* Price Trend Chart Legend - Make it scrollable and more readable */
#price-trend-chart {
    max-height: 500px;
}

/* Chart.js legend container - make scrollable */
#price-trend-section .chart-wrapper {
    position: relative;
}

#price-trend-section canvas {
    max-height: 400px;
}

/* Custom legend container for price trend (if we add a custom one) */
.price-trend-legend-container {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-top: 1rem;
}

.price-trend-legend-container::-webkit-scrollbar {
    width: 8px;
}

.price-trend-legend-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.price-trend-legend-container::-webkit-scrollbar-thumb {
    background: rgba(0, 179, 55, 0.5);
    border-radius: 4px;
}

.price-trend-legend-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 179, 55, 0.7);
}

/* Limit legend items per row */
#price-trend-section .chartjs-legend {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
}

#price-trend-section .chartjs-legend li {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 200px;
}

/* Info message about hidden cards */
.price-trend-info {
    color: #9a9a9a;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-style: italic;
}

.time-range-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 179, 55, 0.3);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.time-range-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-1px);
}

.time-range-btn.active {
    background: #00B337;
    border-color: #00B337;
    color: #0f0f0f;
    font-weight: 600;
}

.time-range-btn.active:hover {
    background: #00d044;
    border-color: #00d044;
}

/* Chart Wrapper */
.chart-wrapper {
    position: relative;
    height: 400px;
    margin-top: 1rem;
}

.chart-wrapper canvas {
    max-height: 100%;
}

/* Pie Chart Container */
/* Pie Chart Infographic Styling (Social Media Optimized) */
.piechart-infographic {
    position: relative;
    padding: 2rem;
    background: rgba(15, 15, 15, 0.95);
    border: 2px solid rgba(0, 179, 55, 0.3);
    border-radius: 12px;
}

/* Title Section */
.piechart-title-section {
    margin-bottom: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Border removed per user request */
    /* Ensure no text content is displayed directly on the div - only show child elements */
    color: transparent;
    font-size: 0;
}

.piechart-title-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 179, 55, 0.3);
}

.piechart-title-section > * {
    /* Reset font properties for child elements */
    color: #f0f0f0;
    font-size: initial;
    line-height: initial;
}

.piechart-title-content {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    margin-right: auto;
    height: 100px;
    justify-content: center;
    align-items: flex-start;
}

.piechart-main-title {
    font-size: 50px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0;
    padding: 0;
    height: 50px;
    border: none;
    border-bottom: none !important;
    border-image: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

.piechart-meta-info {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.piechart-subtitle,
.piechart-date-range {
    color: #9a9a9a;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Branding Corner - Base Styles */
.piechart-branding-corner {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

/* Top Right - For Logo */
.piechart-branding-corner.piechart-branding-top-right {
    top: 2rem;
    right: 2rem;
}

/* Bottom Left - For Text */
.piechart-branding-corner.piechart-branding-bottom-left {
    top: auto;
    right: auto;
    bottom: 2rem;
    left: 2rem;
}

.piechart-branding-logo-corner {
    height: 100px;
    width: auto;
    opacity: 0.95;
    flex-shrink: 0;
    margin-left: auto;
}

.piechart-branding-text-corner {
    color: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Content Wrapper (Chart + Stats Sidebar) */
.piechart-content-wrapper {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.piechart-stats-sidebar {
    flex: 1;
    min-width: 250px;
}

/* Total Stat Box (like examples) */
.piechart-total-stat {
    background: rgba(0, 179, 55, 0.15);
    border: 2px solid rgba(0, 179, 55, 0.4);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Ensure total stat is hidden when display is set to none (backup for JavaScript) */
.piechart-total-stat[style*="display: none"],
.piechart-total-stat[style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Compact variant - smaller, more subtle */
.piechart-total-stat.piechart-total-compact {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-width: 1px;
}

.piechart-total-stat.piechart-total-compact .piechart-total-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.piechart-total-stat.piechart-total-compact .piechart-total-value {
    font-size: 1.5rem;
}

/* Inline variant - minimal, no box */
.piechart-total-stat.piechart-total-inline {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0.5rem;
    text-align: left;
}

.piechart-total-stat.piechart-total-inline .piechart-total-label {
    display: inline;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0;
}

.piechart-total-stat.piechart-total-inline .piechart-total-value {
    display: inline;
    font-size: 1.25rem;
}

.piechart-total-label {
    font-size: 0.9rem;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.piechart-total-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00B337;
    line-height: 1;
}

.piechart-total-description {
    font-size: 0.75rem;
    color: #9a9a9a;
    margin-top: 0.5rem;
    font-style: italic;
}

.piechart-total-stat.piechart-total-compact .piechart-total-description {
    font-size: 0.7rem;
    margin-top: 0.25rem;
}

.piechart-total-stat.piechart-total-inline .piechart-total-description {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.25rem;
    margin-left: 0;
}

.piechart-container {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #000;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    /* Ensure SVG is properly clipped */
    contain: layout style paint;
}

/* Domain Distribution Chart - Smaller size */
.piechart-domain-distribution {
    margin-top: 2rem;
}

.piechart-domain-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    max-width: 100%;
}

.piechart-domain-wrapper {
    margin: 1.5rem 0;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.piechart-domain-wrapper .piechart-container {
    flex: 1;
    max-width: 50%;
}

.piechart-domain-wrapper .piechart-stats-sidebar {
    flex: 1;
    max-width: 50%;
}

.piechart-container svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.piechart-container:empty {
    display: none;
}

.piechart-slice {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    /* Improve image rendering quality for better clarity */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
}

.piechart-slice:hover {
    opacity: 0.9;
}

.piechart-legend {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.piechart-domain-legend {
    width: 100%;
    text-align: left;
}

/* Ensure pie chart percentage text uses inline font-size (no CSS override) */
.piechart-container svg text.piechart-slice-percentage,
.piechart-container svg text.piechart-percentage-text {
    font-size: inherit !important; /* Inherit from inline style set by JavaScript */
}

/* 2-column grid layout - only applied when more than 8 items */
.piechart-legend.piechart-legend-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Responsive: Single column on smaller screens */
@media (max-width: 768px) {
    .piechart-legend.piechart-legend-grid-2col {
        grid-template-columns: 1fr;
    }
}

.piechart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0; /* No rounded edges */
    min-height: 42px; /* Ensure consistent height for alignment */
    border-style: solid;
    border-width: 1px; /* 1px is minimum that reliably renders */
    border-color: transparent;
}

/* Rainbow border for "Other" or items with no runes */
.piechart-legend-item-rainbow-border {
    border-style: solid;
    border-width: 1px; /* 1px is minimum that reliably renders */
    border-radius: 0; /* No rounded edges */
    /* Use opacity to create subtle appearance - border-image doesn't support opacity directly,
       so we'll use a wrapper approach or apply opacity via JavaScript */
    border-image: linear-gradient(90deg, 
        rgba(216, 31, 31, 0.75) 0%,      /* Fury - Red with 50% opacity */
        rgba(79, 142, 51, 0.75) 20%,     /* Calm - Green with 50% opacity */
        rgba(45, 113, 162, 0.75) 40%,    /* Mind - Blue with 50% opacity */
        rgba(230, 116, 17, 0.75) 60%,    /* Body - Orange with 50% opacity */
        rgba(68, 46, 109, 0.75) 80%,     /* Chaos - Purple with 50% opacity */
        rgba(209, 173, 12, 0.75) 100%    /* Order - Yellow/Gold with 50% opacity */
    ) 1;
}

.piechart-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Rune Icons in Legend */
.piechart-legend-runes {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
    width: 56px; /* Fixed width: space for 2 rune icons (28px each) */
    height: 28px; /* Match rune icon height with padding */
    justify-content: center; /* Center single icon within the fixed width */
}

.piechart-rune-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px;
    transition: transform 0.2s ease;
}

.piechart-rune-icon:hover {
    transform: scale(1.1);
}

.piechart-legend-runes-empty {
    width: 56px; /* Match the fixed width for alignment */
    height: 28px;
    /* Empty placeholder - no color bubble, but reserves space for alignment */
}

.piechart-legend-label {
    flex: 1;
    color: #f0f0f0;
    font-weight: 500;
    font-size: 0.85rem; /* Smaller font size */
    text-align: center; /* Center the text */
}

.piechart-legend-value {
    color: #9a9a9a;
    font-size: 0.9rem;
}

/* Pie Chart Debug Panel */
.piechart-debug-toggle {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 179, 55, 0.2);
    border: 1px solid rgba(0, 179, 55, 0.5);
    color: #00B337;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.piechart-debug-toggle:hover {
    background: rgba(0, 179, 55, 0.3);
    border-color: rgba(0, 179, 55, 0.7);
}

.piechart-debug-panel {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 179, 55, 0.3);
    border-radius: 8px;
}

.piechart-debug-panel h4 {
    color: #00B337;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.debug-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.debug-control-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.debug-control-group label {
    min-width: 180px;
    color: #f0f0f0;
    font-size: 0.9rem;
}

.debug-control-group input[type="range"] {
    flex: 1;
    max-width: 300px;
}

.debug-control-group span {
    min-width: 60px;
    color: #00B337;
    font-weight: 600;
    text-align: right;
}

.debug-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-buttons button {
    padding: 0.5rem 1rem;
    background: #00B337;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.debug-buttons button:hover {
    background: #00B337;
}

.debug-buttons button:last-child {
    background: rgba(255, 255, 255, 0.1);
}

.debug-buttons button:last-child:hover {
    background: rgba(255, 255, 255, 0.2);
}

.debug-info {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-info small {
    display: block;
    line-height: 1.4;
}

/* Price Table */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.price-table th,
.price-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price-table th {
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
    font-weight: 600;
}

.price-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.price-positive {
    color: #00B337;
}

.price-negative {
    color: #e4007c;
}

/* AdSense Placeholder */
.adsense-placeholder {
    margin: 2rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #666;
    min-height: 250px;
    position: relative;
}

/* Patreon CTA Fallback */
.patreon-cta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 66, 77, 0.1), rgba(0, 179, 55, 0.1));
    border-radius: 8px;
    padding: 2rem;
}

.patreon-cta-content {
    text-align: center;
    max-width: 500px;
}

.patreon-cta h3 {
    margin: 0 0 0.5rem 0;
}

.patreon-cta p {
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

/* CTA Sections */
.cta-section {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(40, 40, 40, 0.95));
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cta-section h2 {
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #2c5aa0, #3d7bd6);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.3);
}

.cta-button:hover {
    background: linear-gradient(135deg, #3d7bd6, #4d8fe8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.5);
}

.cta-button.secondary {
    background: linear-gradient(135deg, #00B337, #00B337);
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.3);
}

.cta-button.secondary:hover {
    background: linear-gradient(135deg, #00B337, #00B337);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.5);
}

.cta-button.support {
    background: linear-gradient(135deg, #ff424d, #ff6b75);
    box-shadow: 0 2px 8px rgba(255, 66, 77, 0.3);
}

.cta-button.support:hover {
    background: linear-gradient(135deg, #ff6b75, #ff8a92);
    box-shadow: 0 4px 12px rgba(255, 66, 77, 0.5);
}

/* Footer */
.article-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 2rem 0;
}

.social-links a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-links a:hover {
    transform: scale(1.1);
}

.social-links img {
    width: 40px;
    height: auto;
}

.footer-info {
    text-align: center;
    color: #9a9a9a;
    font-size: 0.85rem;
    margin-top: 2rem;
}

.footer-info a {
    color: #00B337;
    text-decoration: none;
}

.footer-info a:hover {
    text-decoration: underline;
}

/* Related Articles */
.related-articles {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.related-articles h3 {
    margin-bottom: 1.5rem;
    color: #00B337;
}

.related-articles ul {
    list-style: none;
    margin: 0;
}

.related-articles li {
    margin-bottom: 0.75rem;
}

.related-articles a {
    color: #00B337;
    text-decoration: none;
    font-size: 1.1rem;
}

.related-articles a:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
    
    .navbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #1f1f1f;
        flex-direction: column;
        padding: 1rem;
    }
    
    .navbar-links.active {
        display: flex;
    }
    
    .article-title {
        font-size: 1.8rem;
    }
    
    .article-container {
        padding: 1rem;
    }
    
    .key-card {
        flex-direction: column;
    }
    
    .key-card-image {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .key-card-image img {
        object-fit: contain;
        object-position: center center;
    }
    
    .key-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .key-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .key-card-buy-button {
        width: 100%;
        justify-content: center;
    }
    
    .pros-cons, .pros-cons-enhanced {
        grid-template-columns: 1fr;
    }
    
    .strength-item, .weakness-item {
        flex-direction: column;
    }
    
    .strength-icon, .weakness-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin: 0 auto;
    }
    
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    /* Featured Cards Grid - Responsive: 2 columns on tablet */
    #featured-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-button {
        width: 100%;
    }
    
    .chart-wrapper {
        height: 300px;
    }
}

/* Reading Time */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ============================================
   NEW WIDGET STYLES
   ============================================ */

/* Price Movers Widget */
.price-movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.price-movers-section h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-gainers-title {
    color: #00B337;
}

.price-losers-title {
    color: #e4007c;
}

.price-movers-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.price-mover-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid;
    transition: background 0.2s ease;
}

.price-mover-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.price-mover-item.gainer {
    border-left-color: #00B337;
}

.price-mover-item.loser {
    border-left-color: #e4007c;
}

.price-mover-name {
    flex: 1;
    font-weight: 500;
}

.price-mover-change {
    font-weight: 600;
    font-size: 1rem;
}

.price-mover-change.positive {
    color: #00B337;
}

.price-mover-change.negative {
    color: #e4007c;
}

.price-mover-price {
    color: #ffa500;
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 1rem;
}

/* Decklist Widget */
.decklist-header {
    /* Header stays visible - no additional styles needed */
    display: flex;
}

.decklist-toggle-btn {
    background: transparent;
    border: 1px solid rgba(0, 179, 55, 0.3);
    color: #00B337;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    min-width: 36px;
    min-height: 29px;
}

.decklist-toggle-btn:hover {
    background: rgba(0, 179, 55, 0.1);
    border-color: #00B337;
}

.decklist-toggle-btn i {
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
    line-height: 1;
    display: inline-block;
}

/* Default state: content is HIDDEN (collapsed) - show fa-eye (open eye) = "click to show" */
.decklist-toggle-btn .fa-eye {
    display: inline-block;
}

.decklist-toggle-btn .fa-eye-slash {
    display: none;
}

/* When content is VISIBLE (expanded): show fa-eye-slash (closed eye) = "click to hide" */
.decklist-toggle-btn.expanded .fa-eye {
    display: none !important;
}

.decklist-toggle-btn.expanded .fa-eye-slash {
    display: inline-block !important;
}

.decklist-content,
.decklist-collapsible-content {
    margin-top: 1rem;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 5000px; /* Large enough for expanded content */
    opacity: 1;
}

.decklist-content.decklist-collapsed,
.decklist-collapsible-content.decklist-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* Grid container for side-by-side widgets */
.widgets-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

/* When only one widget is visible (using :only-child), make it full width */
.widgets-grid-container > *:only-child {
    grid-column: 1 / -1;
}

/* Unified widget styling for consistent appearance */
.unified-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.unified-widget:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.unified-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
    min-height: 3.5rem;
    flex-shrink: 0;
}

.unified-widget-title-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.unified-widget-title-group > div {
    flex: 1;
    min-width: 0;
}

.unified-widget-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.3;
}

.unified-widget-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #9a9a9a;
    line-height: 1.4;
}

.unified-widget-action-btn {
    background: rgba(0, 179, 55, 0.1);
    border: 1px solid rgba(0, 179, 55, 0.3);
    color: #00B337;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.unified-widget-action-btn:hover {
    background: rgba(0, 179, 55, 0.2);
    border-color: #00B337;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 179, 55, 0.2);
}

.unified-widget-content {
    flex: 1;
    overflow: hidden;
    margin-top: 0;
    min-height: 0;
}

/* Ensure decklist content uses unified styling */
.unified-widget .decklist-content,
.unified-widget .decklist-collapsible-content {
    margin-top: 0;
}

/* Remove default padding from widget-container inside unified widgets */
.unified-widget .widget-container {
    padding: 0;
    background: transparent;
    border: none;
}

/* Dual charts layout for card type and domain distribution - stacked vertically */
.charts-grid-dual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
}

.charts-grid-dual .chart-wrapper {
    min-height: 300px;
    position: relative;
}

/* Ensure toggle buttons are aligned */
.unified-widget-header .decklist-toggle-btn {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .widgets-grid-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .widgets-grid-container > * {
        grid-column: 1 / -1;
    }
    
    .unified-widget-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .unified-widget-title-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

.decklist-section {
    margin-bottom: 2rem;
}

.decklist-section h4 {
    color: #00B337;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(0, 179, 55, 0.3);
    padding-bottom: 0.5rem;
}

.decklist-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.decklist-card-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: background 0.2s ease;
}

.decklist-card-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.decklist-card-count {
    font-weight: 700;
    color: #00B337;
    min-width: 30px;
    text-align: center;
}

.decklist-card-name {
    flex: 1;
}

.decklist-card-price {
    color: #00B337;
    font-size: 0.9rem;
    font-weight: 600;
}

.decklist-total {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 179, 55, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.decklist-total-summary {
    color: #9a9a9a;
    font-size: 0.95rem;
    font-weight: 500;
}

.decklist-total-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.decklist-total-label {
    color: #f0f0f0;
}

.decklist-total-value {
    color: #00B337;
}

/* Budget Breakdown Widget */
.budget-breakdown-content {
    margin-top: 1rem;
}

.budget-category {
    margin-bottom: 1.5rem;
}

.budget-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.budget-category-name {
    font-weight: 600;
    color: #f0f0f0;
}

.budget-category-total {
    color: #00B337;
    font-weight: 600;
}

.budget-category-count {
    color: #9a9a9a;
    font-size: 0.9rem;
}

.budget-items-container {
    margin-top: 0.5rem;
}

.budget-item-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 179, 55, 0.2);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.budget-header-name {
    text-align: left;
}

.budget-header-price,
.budget-header-total {
    text-align: right;
    min-width: 80px;
}

.budget-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.budget-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

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

.budget-item-name {
    text-align: left;
}

.budget-item-price {
    color: #00B337;
    font-weight: 600;
    text-align: right;
    min-width: 80px;
}

.budget-item-total {
    color: #f0f0f0;
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.budget-summary {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0, 179, 55, 0.1);
    border: 1px solid rgba(0, 179, 55, 0.3);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.budget-summary-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f0f0f0;
}

.budget-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B337;
}

/* Set Distribution Widget */
.set-distribution-content {
    margin-top: 1rem;
}

.set-distribution-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 4px solid #00B337;
    transition: background 0.2s ease;
}

.set-distribution-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.set-distribution-info {
    flex: 1;
}

.set-distribution-name {
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 0.25rem;
}

.set-distribution-count {
    color: #9a9a9a;
    font-size: 0.9rem;
}

.set-distribution-percentage {
    color: #00B337;
    font-weight: 600;
    font-size: 1.1rem;
    min-width: 60px;
    text-align: right;
}

.set-distribution-bar {
    margin-top: 0.5rem;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.set-distribution-bar-fill {
    height: 100%;
    background: #00B337;
    transition: width 0.3s ease;
}

/* Mobile Responsive for New Widgets */
@media (max-width: 768px) {
    .price-movers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .decklist-cards {
        grid-template-columns: 1fr;
    }
    
    .budget-summary {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ============================================
   ADDITIONAL WIDGET STYLES
   ============================================ */

/* Widget Description */
.widget-description {
    color: #9a9a9a;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-style: italic;
}

/* Top Cards by Price Widget */
.top-cards-price-content {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.top-card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 4px solid rgba(0, 179, 55, 0.5);
    transition: all 0.2s ease;
    position: relative;
}

.top-card-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #00B337;
    transform: translateX(4px);
}

.top-card-rank {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f0f0f;
    border: 2px solid #0f0f0f;
}

.top-card-rank.rank-1 {
    background: #FFD700;
}

.top-card-rank.rank-2 {
    background: #C0C0C0;
}

.top-card-rank.rank-3 {
    background: #CD7F32;
}

.top-card-info {
    flex: 1;
}

.top-card-name {
    display: block;
    font-weight: 600;
    color: #f0f0f0;
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
}

.top-card-name:hover {
    color: #00B337;
}

.top-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #9a9a9a;
}

.top-card-rarity {
    color: #00B337;
}

.top-card-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #00B337;
    min-width: 100px;
    text-align: right;
}

/* Market Heat Widget */
.market-heat-content {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.market-heat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-left: 4px solid;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.market-heat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.market-heat-item.hot {
    border-left-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.05);
}

.market-heat-item.cold {
    border-left-color: #4dabf7;
    background: rgba(77, 171, 247, 0.05);
}

.market-heat-item.neutral {
    border-left-color: #9a9a9a;
}

.market-heat-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.market-heat-info {
    flex: 1;
}

.market-heat-name {
    display: block;
    font-weight: 600;
    color: #f0f0f0;
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
}

.market-heat-name:hover {
    color: #00B337;
}

.market-heat-stats {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.9rem;
}

.market-heat-change {
    font-weight: 600;
}

.market-heat-change.positive {
    color: #00B337;
}

.market-heat-change.negative {
    color: #e4007c;
}

.market-heat-price {
    color: #9a9a9a;
}

/* Card Comparison Widget */
.comparison-table-wrapper {
    margin-top: 1rem;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table thead {
    background: rgba(0, 179, 55, 0.2);
}

.comparison-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #f0f0f0;
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
}

.comparison-table th a {
    color: #00B337;
    text-decoration: none;
    transition: color 0.2s ease;
}

.comparison-table th a:hover {
    color: #00B337;
}

.comparison-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #f0f0f0;
}

.comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.comparison-label {
    font-weight: 600;
    color: #9a9a9a;
}

/* Power/Energy Analysis Widget */
.power-energy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

/* Mobile Responsive for Additional Widgets */
@media (max-width: 768px) {
    .top-card-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .top-card-price {
        align-self: flex-end;
        text-align: right;
    }
    
    .market-heat-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .market-heat-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .comparison-table-wrapper {
        overflow-x: scroll;
    }
    
    .comparison-table {
        min-width: 600px;
    }
    
    .power-energy-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================
   COMPREHENSIVE DECK BREAKDOWN WIDGET
   (Comprehensive deck breakdown widget)
   ============================================ */

/* ============================================
   DECK BREAKDOWN LAYOUT - Deckbuilder Style
   ============================================ */

/* Main Widget Container - Deckbuilder Panel Style - Match Article Theme */
#deck-breakdown-widget {
    background: rgba(20, 20, 20, 0.95);
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    overflow: visible;
    position: relative;
    margin: 1rem 0;
    max-width: 1800px;
    box-sizing: content-box;
}

#deck-breakdown-widget::before {
    display: none;
}

#deck-breakdown-widget h3 {
    color: #f0f0f0;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    padding: 1rem 1.5rem;
    border-bottom: none;
    flex-shrink: 0;
}

/* ============================================
   DECK BREAKDOWN - 5 SEPARATE DIVS APPROACH
   ============================================ */

/* Base styling for each separate section */
.deck-section-separate {
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid rgba(60, 60, 60, 0.8);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.deck-section-separate:last-child {
    margin-bottom: 0;
}

.deck-section-separate h4 {
    color: #f0f0f0;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
}

.deck-section-separate h4 span {
    color: #00B337;
    font-weight: 700;
}

.section-note {
    color: #9ca3af;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    font-style: italic;
}

/* Div 1: Main Deck (40 cards) - Grid layout - 10 columns x 4 rows */
.main-deck-grid-separate {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.75rem;
    min-height: 200px;
}

/* Responsive main deck - fewer columns on smaller screens */
@media (max-width: 1200px) {
    .main-deck-grid-separate {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 768px) {
    .main-deck-grid-separate {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 480px) {
    .main-deck-grid-separate {
        grid-template-columns: repeat(3, 1fr);
    }
}

.main-deck-grid-separate .deck-card-item {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* First card (Champion) indicator */
.main-deck-grid-separate .deck-card-item:first-child {
    border-color: rgba(0, 179, 55, 0.6);
    border-width: 3px;
    box-shadow: 0 0 10px rgba(0, 179, 55, 0.3);
}

.main-deck-grid-separate .deck-card-item:first-child::before {
    content: 'CHAMPION';
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 179, 55, 0.9);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.main-deck-grid-separate .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 12px -2px rgba(0, 179, 55, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.main-deck-grid-separate .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.main-deck-grid-separate .deck-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 0.5rem;
    color: white;
    font-size: 0.75rem;
}

.main-deck-grid-separate .deck-card-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.main-deck-grid-separate .deck-card-price {
    font-size: 0.7rem;
    color: #00B337;
    font-weight: 600;
}

/* Div 2: Legend Card - Single card display */
.legend-content-separate {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* When JavaScript sets display: flex on legend-section, ensure it shows */
#legend-section.deck-section-separate {
    display: flex !important;
    flex-direction: column;
}

.legend-content-separate .deck-card-item {
    max-width: 200px;
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 165, 0, 0.6);
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.3);
}

.legend-content-separate .deck-card-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.5);
}

.legend-content-separate .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Div 3: Battlefields (3 cards) - Horizontal row - Always landscape */
.battlefields-content-separate {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    overflow: visible;
}

/* When JavaScript sets display: flex on battlefield-section, ensure it shows */
#battlefield-section.deck-section-separate {
    display: flex !important;
    flex-direction: column;
}

.battlefields-content-separate .deck-card-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(33.333% - 0.67rem);
    height: 200px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(139, 92, 246, 0.6);
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.battlefields-content-separate .deck-card-item:hover {
    border-color: rgba(139, 92, 246, 0.8);
    transform: translateY(-4px);
    box-shadow: 0 8px 12px -2px rgba(139, 92, 246, 0.3);
}

/* Image styling - Fixed dimensions for all images */
.battlefields-content-separate .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
}

/* Vertical images - rotate 90 degrees to match horizontal cards */
.battlefields-content-separate .deck-card-item.vertical-image .deck-card-image {
    transform: rotate(90deg);
    transform-origin: center center;
}

/* Detect vertical images - if image height > width, add vertical-image class */
.battlefields-content-separate .deck-card-item img {
    max-width: 100%;
    max-height: 100%;
}

.battlefields-content-separate .deck-card-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(139, 92, 246, 0.9);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
}

/* Div 4: Runes with Ratios - Grid or list layout */
.rune-ratios-content-separate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    min-height: 100px;
}

/* When JavaScript sets display: flex on rune-ratios-section, ensure it shows */
#rune-ratios-section.deck-section-separate {
    display: flex !important;
    flex-direction: column;
}

/* Support for JavaScript-generated rune classes */
.rune-ratios-content-separate .runes-display,
.rune-ratios-content-separate .runes-icons-grid {
    width: 100%;
}

.rune-ratios-content-separate .runes-icons-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.rune-ratios-content-separate .rune-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    min-width: 150px;
    transition: all 0.2s ease;
}

.rune-ratios-content-separate .rune-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.rune-ratios-content-separate .rune-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 179, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rune-ratios-content-separate .rune-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rune-ratios-content-separate .rune-name {
    color: #f0f0f0;
    font-weight: 600;
    font-size: 1rem;
}

.rune-ratios-content-separate .rune-count {
    color: #00B337;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Div 5: Sideboard - Grid layout - Clean 4 columns */
.sideboard-content-separate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    min-height: 150px;
}

/* Responsive sideboard - 2 columns on smaller screens */
@media (max-width: 768px) {
    .sideboard-content-separate {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sideboard-content-separate .deck-card-item {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    transition: all 0.2s ease;
}

.sideboard-content-separate .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px rgba(0, 179, 55, 0.2);
}

.sideboard-content-separate .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Main Deck Container - Flex layout matching deckbuilder style */
.deck-main-container {
    flex: 1;
    height: 100%;
    padding: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    background: rgba(20, 20, 20, 0.95);
    min-height: 0;
}

.deck-section-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    overflow-y: auto;
}

.deck-section-main h4 {
    color: #f0f0f0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.deck-section-main h4 span {
    color: #00B337;
    font-weight: 700;
}

/* Main Deck Grid - Large grid for 40 cards (5 columns x 8 rows) */
.main-deck-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* Main deck cards - direct grid items, no grouping - Match Article Theme */
.main-deck-grid .deck-card-item {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 0.2s ease;
}

.main-deck-grid .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 179, 55, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.main-deck-grid .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-deck-grid .deck-card-info {
    padding: 0.5rem;
    font-size: 0.85rem;
}

.main-deck-grid .deck-card-name {
    font-size: 0.8rem;
    line-height: 1.2;
}

.main-deck-grid .deck-card-price {
    font-size: 0.75rem;
    color: #00B337;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Bottom Bar - 2-Row Layout */
.deck-bottom-bar {
    display: flex !important;
    flex-direction: row !important;
    flex: 0.4 1 0; /* flex-[0.4] - 40% of parent */
    gap: 1rem; /* gap-4 equivalent */
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-top: 1.5rem;
    align-items: flex-start;
    min-height: 0; /* Allow flex shrinking */
    overflow: visible; /* Allow content to be visible */
}

/* Legend section - fixed width, spans full height */
.deck-legend-span {
    width: 212px; /* Match reference w-[212px] */
    flex: 0 0 212px; /* Don't grow or shrink */
    align-self: stretch; /* Stretch to match height of right side */
    min-width: 0;
    min-height: 0;
    display: flex !important; /* Ensure flex when shown */
    flex-direction: column;
}

/* Right side container - flex column for top and bottom rows */
.deck-right-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 0; /* Take remaining space (flex-1) */
    gap: 0.5rem; /* gap-2 equivalent */
    min-width: 0;
    min-height: 0;
    overflow: visible; /* Prevent clipping */
    position: relative; /* Establish stacking context */
}

/* Top Row: Battlefields and Runes - flex row */
.deck-bottom-row-top {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem; /* gap-2 equivalent */
    flex-wrap: nowrap;
    flex: 0 1 auto; /* Don't grow, use content size */
    min-width: 0;
    min-height: 0;
    overflow: visible;
    position: relative;
}

/* Battlefields section - 65% of row width */
.deck-bottom-row-top #battlefield-section {
    flex: 0.65 1 0; /* flex-[0.65] - 65% of row */
    min-width: 0;
    min-height: 88px; /* Match reference height */
    max-height: 88px; /* Prevent overflow */
    display: flex !important; /* Ensure flex when shown */
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
    position: relative;
}

/* Runes section - 35% of row width */
.deck-bottom-row-top #rune-ratios-section {
    flex: 0.35 1 0; /* flex-[0.35] - 35% of row */
    min-width: 0;
    min-height: 88px; /* Match reference height */
    max-height: 88px; /* Prevent overflow */
    display: flex !important; /* Ensure flex when shown */
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
    position: relative;
}

/* Ensure both sections are visible when they have content */
.deck-bottom-row-top #battlefield-section[style*="flex"],
.deck-bottom-row-top #battlefield-section:not([style*="none"]) {
    display: flex !important;
}

.deck-bottom-row-top #rune-ratios-section[style*="flex"],
.deck-bottom-row-top #rune-ratios-section:not([style*="none"]) {
    display: flex !important;
}

/* Bottom Row: Sideboard */
.deck-bottom-row-bottom {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 1 auto; /* Don't grow, use content size */
    min-width: 0;
    min-height: 0;
    overflow: visible;
    position: relative;
    margin-top: 0.5rem; /* Ensure gap from top row */
}

/* Sideboard section - full width of right container */
.deck-bottom-row-bottom #sideboard-section {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-height: 106px; /* Match reference height */
    overflow: hidden;
    display: flex !important; /* Ensure flex when shown */
    flex-direction: column;
    position: relative;
}

.deck-bottom-section {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    min-width: 0; /* Allow flex shrinking */
    overflow: hidden; /* Prevent content overflow */
    position: relative; /* Establish stacking context */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Battlefield section specific - ensure it fits in grid */
#battlefield-section {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#battlefield-section h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-bottom-section:hover {
    border-color: rgba(0, 179, 55, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 179, 55, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.deck-bottom-section h5 {
    color: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.deck-bottom-section h5 span {
    color: #00B337;
    font-weight: 700;
}

/* Legend - Single card display */
.legend-single {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.legend-single .deck-card-item {
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 0.2s ease;
}

.legend-single .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 179, 55, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Battlefields - Horizontal row of 3 cards - Force horizontal layout */
.battlefields-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#battlefield-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem; /* gap-2 equivalent */
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 60px; /* Ensure minimum height for cards */
    max-height: 100%; /* Don't exceed parent */
    overflow: hidden; /* Prevent overflow */
    flex: 1 1 auto; /* Take available space */
    box-sizing: border-box;
}

#battlefield-content .deck-card-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative;
    width: auto !important;
}

.battlefields-row .deck-type-group {
    margin-bottom: 0;
    width: 100%;
}

.battlefields-row .deck-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    width: 100%;
    justify-content: flex-start;
}

.battlefields-row .deck-card-item,
#battlefield-content .deck-card-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem;
    transition: all 0.2s ease;
    aspect-ratio: 2.5 / 3.5;
    overflow: hidden;
    position: relative;
}

#battlefield-content .deck-card-item .deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#battlefield-content .deck-card-item .deck-card-info {
    display: none; /* Hide card info in compact battlefield view */
}

#battlefield-content .deck-card-item .deck-card-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 179, 55, 0.9);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 700;
    z-index: 2;
    line-height: 1;
}

.battlefields-row .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 179, 55, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Sideboard - Horizontal row layout (not stacked) */
.sideboard-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    max-height: 112px; /* Match card height */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    overflow-y: hidden;
    align-items: flex-start;
}

.sideboard-grid .deck-type-group {
    display: contents; /* Remove grouping wrapper, cards become direct children */
}

.sideboard-grid .deck-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
}

.sideboard-grid .deck-card-item {
    flex: 0 0 auto; /* Don't grow, use fixed size */
    width: 80px; /* Fixed card width - compact size */
    max-width: 80px;
    min-width: 80px;
    height: 112px; /* Fixed height to match aspect ratio */
    max-height: 112px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.25rem;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sideboard-grid .deck-card-image {
    width: 100%;
    height: auto;
    max-height: 80px; /* Limit image height */
    object-fit: cover;
    flex: 0 0 auto;
    min-height: 0;
}

.sideboard-grid .deck-card-placeholder {
    width: 100%;
    height: 80px; /* Fixed placeholder height */
    max-height: 80px;
    background: rgba(0, 179, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B337;
    border-radius: 4px;
    flex: 0 0 auto;
}

.sideboard-grid .deck-card-info {
    padding: 0.25rem 0;
    font-size: 0.7rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sideboard-grid .deck-card-name {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.sideboard-grid .deck-card-price {
    font-size: 0.6rem;
    color: #00B337;
    font-weight: 600;
    margin-top: 0.1rem;
}

/* Hide quantity badges in sideboard */
.sideboard-grid .deck-card-count-badge {
    display: none !important;
}

.sideboard-grid .deck-card-item:hover {
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 179, 55, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Runes - Compact icon display - allow flexible sizing */
.deck-runes-compact {
    min-width: 150px;
    /* Remove max-width to allow flex sizing */
}

/* Legacy deck-section for charts and other sections */
.deck-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.deck-section:last-child {
    border-bottom: none;
}

.deck-section h4 {
    color: #00B337;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.deck-section h5 {
    color: #f0f0f0;
    margin: 1rem 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Deck Grid - Card Display */
.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Override for main-deck-content - it should be a container, not a grid */
#main-deck-content.deck-grid {
    display: block;
    margin-top: 0;
}

/* Deck Type Grouping */
.deck-type-group {
    margin-bottom: 2rem;
}

.deck-type-header {
    color: #f0f0f0;
    margin: 1rem 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deck-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

/* Battlefields - Horizontal Row */
#battlefield-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#battlefield-content .deck-type-group {
    margin-bottom: 0;
}

#battlefield-content .deck-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Legend Grid - Single Card Display */
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 300px;
}

.legend-grid .deck-card-item {
    max-width: 100%;
}

/* Deck Card Item */
.deck-card-item {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.deck-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 179, 55, 0.2);
    border-color: rgba(0, 179, 55, 0.5);
}

.deck-card-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.deck-card-placeholder {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.2), rgba(228, 0, 124, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.deck-card-count-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #00B337;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 4px;
    border: 2px solid #00B337;
}

.deck-card-info {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
}

.deck-card-name {
    display: block;
    color: #f0f0f0;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
    line-height: 1.3;
}

.deck-card-name:hover {
    color: #00B337;
}

/* STANDARDIZED: All card prices use #00B337 */
.deck-card-price {
    color: #00B337;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Legend Grid (for Riftbound Legends/Champions) */
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Rune Ratios */
.rune-ratios-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.rune-ratio-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rune-ratio-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.rune-ratio-name {
    color: #f0f0f0;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.rune-ratio-count {
    color: #00B337;
    font-size: 1.2rem;
    font-weight: 700;
}

.deck-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.deck-card-item {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.deck-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.deck-card-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

.deck-card-placeholder {
    width: 100%;
    aspect-ratio: 5/7;
    background: rgba(0, 179, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #00B337;
    border-radius: 8px 8px 0 0;
}

.deck-card-count-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #00B337;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 12px;
    border: 2px solid #00B337;
    min-width: 28px;
    text-align: center;
}

.deck-card-info {
    padding: 0.75rem;
}

.deck-card-name {
    display: block;
    color: #f0f0f0;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
    line-height: 1.3;
}

.deck-card-name:hover {
    color: #00B337;
}

.deck-card-price {
    color: #00B337;
    font-size: 0.8rem;
    font-weight: 600;
}

.deck-type-group {
    margin-bottom: 1.5rem;
}

.deck-type-header {
    color: #f0f0f0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Legend & Battlefield Cards */
.legend-card,
.battlefield-card {
    border: 2px solid rgba(0, 179, 55, 0.5);
}

.legend-card:hover,
.battlefield-card:hover {
    border-color: #00B337;
    box-shadow: 0 4px 16px rgba(0, 179, 55, 0.4);
}

/* Rune Ratios - Container for runes display */
.rune-ratios-content {
    margin-top: 0;
}

.rune-ratio-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 6px;
}

.rune-ratio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.rune-name {
    font-weight: 600;
    color: #f0f0f0;
}

.rune-count {
    color: #00B337;
    font-weight: 600;
}

.rune-ratio-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.rune-ratio-fill {
    height: 100%;
    background: #00B337;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rune-percentage {
    color: #9a9a9a;
    font-size: 0.85rem;
    text-align: right;
}

/* Archetype Breakdown */
.archetype-breakdown-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.archetype-breakdown-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 6px;
}

.archetype-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.archetype-name {
    font-weight: 600;
    color: #f0f0f0;
}

.archetype-count {
    color: #00B337;
    font-weight: 600;
}

.archetype-breakdown-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.archetype-breakdown-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* Deck Total Section */
.deck-total-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 179, 55, 0.3);
}

.deck-total-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: rgba(0, 179, 55, 0.1);
    border: 1px solid rgba(0, 179, 55, 0.3);
    border-radius: 8px;
}

.deck-total-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f0f0f0;
}

.deck-total-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00B337;
}

/* YouTube Video Section */
#youtube-video-section {
    width: 100%;
    max-width: 100%;
}

/* Hide sections if they have data-section-hidden attribute or are set to display none */
#youtube-video-section[data-section-hidden="true"],
#youtube-video-section[style*="display: none"],
#archetype-chart-section[data-section-hidden="true"],
#archetype-chart-section[style*="display: none"],
#domain-distribution-section[data-section-hidden="true"],
#domain-distribution-section[style*="display: none"],
#domain-chart-container[data-section-hidden="true"],
#domain-chart-container[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#youtube-video-content {
    width: 100%;
    max-width: 100%;
}

.youtube-video-wrapper {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 100%;
}

/* YouTube Embed Container - Responsive 16:9 aspect ratio - LARGER SIZE */
.youtube-embed-container {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Larger max width for better viewing */
    margin: 0 auto; /* Center the video */
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.2);
    background: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.15);
    transition: all 0.2s ease;
}

.youtube-embed-container:hover {
    border-color: rgba(0, 179, 55, 0.3);
    box-shadow: 0 6px 16px rgba(0, 179, 55, 0.25);
}

/* Make video even larger on desktop */
@media (min-width: 1200px) {
    .youtube-embed-container {
        max-width: 1400px;
    }
}

/* On smaller screens, still make it prominent */
@media (max-width: 768px) {
    .youtube-embed-container {
        max-width: 100%;
        border-radius: 8px;
        border-width: 1px;
    }
}

.youtube-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.youtube-video-info {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
}

.youtube-video-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #00B337;
    margin-bottom: 0.5rem;
}

.youtube-video-description {
    color: #b0b0b0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.youtube-watch-text {
    display: inline-block;
    color: #00B337;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.youtube-video-link:hover .youtube-watch-text {
    text-decoration: underline;
}

/* Mobile Responsive for Deck Breakdown */
@media (max-width: 768px) {
    /* Main deck - fewer columns on mobile */
    .main-deck-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Bottom bar - mobile responsive: stack everything vertically */
    .deck-bottom-bar {
        flex-direction: column !important;
        gap: 1rem;
    }
    
    /* Legend - full width on mobile */
    .deck-legend-span {
        align-self: stretch;
        width: 100%;
    }
    
    /* Right container - full width on mobile */
    .deck-right-container {
        width: 100%;
    }
    
    /* Top row stacks on mobile */
    .deck-bottom-row-top {
        flex-direction: column !important;
        gap: 1rem;
    }
    
    /* Battlefields and Runes - full width on mobile */
    .deck-bottom-row-top #battlefield-section,
    .deck-bottom-row-top #rune-ratios-section {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Sideboard - full width on mobile */
    .deck-bottom-row-bottom #sideboard-section {
        width: 100%;
    }
    
    /* Battlefields - stack on mobile */
    #battlefield-content {
        flex-wrap: wrap !important;
    }
    
    .battlefields-row .deck-card-item {
        flex: 0 0 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
    }
    
    /* Sideboard - horizontal scroll on mobile */
    .sideboard-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .sideboard-grid .deck-card-item {
        min-width: 100px; /* Smaller cards on mobile */
    }
    
    .deck-grid,
    .deck-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }
    
    .deck-card-info {
        padding: 0.5rem;
    }
    
    .deck-card-name {
        font-size: 0.8rem;
    }
    
    .deck-total-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .deck-total-value {
        font-size: 1.5rem;
    }
    
    /* Featured Cards Grid - Mobile: 1 column on small screens */
    #featured-cards-grid {
        grid-template-columns: 1fr;
    }
    
    /* Battlefields stack on mobile */
    #battlefield-content .deck-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .legend-grid {
        max-width: 100%;
    }
}

/* Runes Display - Icon-based layout */
.runes-display {
    margin-top: 0.5rem;
    flex: 1 1 auto;
    max-height: 100%; /* Don't exceed parent */
    overflow: hidden;
    box-sizing: border-box;
}

.runes-icons-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem; /* gap-2 equivalent */
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 100%; /* Don't exceed parent */
    overflow: hidden;
    box-sizing: border-box;
}

.rune-type-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 179, 55, 0.1);
    border: 2px solid rgba(0, 179, 55, 0.3);
    border-radius: 8px;
    min-width: 70px;
    flex: 0 1 auto; /* Don't grow equally, use content width */
    transition: all 0.3s ease;
    height: fit-content;
}

.rune-type-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.3);
    border-color: rgba(0, 179, 55, 0.6);
}

.rune-icon-symbol {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.rune-type-name {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.rune-type-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* Removed .runes-total - total runes is always 12, no need to display */

/* Mobile Responsive for Runes */
@media (max-width: 768px) {
    .runes-icons-grid {
        gap: 0.75rem;
    }
    
    .rune-type-icon {
        min-width: 80px;
        padding: 0.75rem 1rem;
    }
    
    .rune-icon-symbol {
        font-size: 2rem;
    }
    
    .rune-type-name {
        font-size: 0.8rem;
    }
    
    .rune-type-count {
        font-size: 1.2rem;
    }
}

/* Mobile - Extra Small Screens */
@media (max-width: 480px) {
    #featured-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .runes-icons-grid {
        gap: 0.5rem;
    }
    
    .rune-type-icon {
        min-width: 70px;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   CARD MODAL STYLES
   ============================================ */

.card-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.card-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.card-modal-content {
    position: relative;
    background: #1f1f1f;
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 179, 55, 0.3);
    z-index: 10001;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.card-modal.show .card-modal-content {
    transform: scale(1);
}

.card-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #f0f0f0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    z-index: 10002;
}

.card-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.card-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-modal-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.card-modal-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-modal-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0;
}

.card-modal-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #9a9a9a;
    font-size: 0.95rem;
}

.card-modal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B337;
    margin: 0.5rem 0;
}

.card-modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.card-modal-purchase-btn {
    flex: 1;
    background: #00B337;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-align: center;
}

.card-modal-purchase-btn:hover {
    background: #00d044;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.4);
}

.card-modal-purchase-btn:active {
    transform: translateY(0);
}

/* Make deck cards clickable */
.deck-card-item {
    cursor: pointer;
    user-select: none;
}

.deck-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.3);
}

.deck-card-image {
    pointer-events: none; /* Prevent image drag, allow click on parent */
}

/* Mobile Responsive for Card Modal */
@media (max-width: 768px) {
    .card-modal-content {
        padding: 1rem;
        width: 95%;
        max-width: 95%;
        max-height: 90vh;
        margin: 1rem;
    }
    
    .card-modal-name {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    .card-modal-body {
        gap: 1rem;
    }
    
    .card-modal-image {
        max-width: 100%;
        width: 100%;
    }
    
    .card-modal-info {
        gap: 0.75rem;
    }
    
    .card-modal-details {
        font-size: 0.85rem;
        gap: 0.4rem;
    }
    
    .card-modal-price {
        font-size: 1.25rem;
        margin: 0.5rem 0;
    }
    
    .card-modal-actions {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }
    
    .card-modal-purchase-btn {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .card-modal-close {
        width: 36px;
        height: 36px;
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1rem;
    }
    
    /* Ensure deck cards are easily clickable on mobile */
    .deck-card-item {
        min-height: 44px; /* Minimum touch target size */
        min-width: 44px;
        -webkit-tap-highlight-color: rgba(0, 179, 55, 0.3);
        tap-highlight-color: rgba(0, 179, 55, 0.3);
    }
    
    .decklist-card-item {
        min-height: 44px;
        min-width: 44px;
        -webkit-tap-highlight-color: rgba(0, 179, 55, 0.3);
        tap-highlight-color: rgba(0, 179, 55, 0.3);
    }
}

/* ============================================
   NEW WIDGET STYLES - Immediate Improvements
   ============================================ */

/* Deck Ratings Widget */
.deck-ratings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.rating-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    text-align: center;
}

.rating-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 179, 55, 0.3);
    transform: translateY(-2px);
}

.rating-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rating-header i {
    font-size: 1.5rem;
    color: #00B337;
}

.rating-label {
    flex: 1;
    font-weight: 600;
    font-size: 1.1rem;
    color: #f0f0f0;
}

.rating-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: #00B337;
}

.rating-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.rating-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.rating-description {
    color: #9a9a9a;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Format Legality Widget */
.format-legality-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.format-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 200px;
}

.format-badge.legal {
    border-color: rgba(0, 179, 55, 0.5);
}

.format-badge.illegal {
    border-color: rgba(228, 0, 124, 0.5);
}

.format-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.format-badge.legal:hover {
    border-color: rgba(0, 179, 55, 0.8);
}

.format-badge.illegal:hover {
    border-color: rgba(228, 0, 124, 0.8);
}

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

.format-badge.legal .format-icon {
    color: #00B337;
}

.format-badge.illegal .format-icon {
    color: #e4007c;
}

.format-info {
    flex: 1;
}

.format-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #f0f0f0;
    margin-bottom: 0.25rem;
}

.format-notes {
    font-size: 0.85rem;
    color: #9a9a9a;
}

/* Mulligan Guide Widget */
.mulligan-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.mulligan-column {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.mulligan-column:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 179, 55, 0.3);
}

.mulligan-column h3 {
    color: #00B337;
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mulligan-section {
    margin-bottom: 1.5rem;
}

.mulligan-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mulligan-section.always-keep h4 {
    color: #00B337;
}

.mulligan-section.usually-keep h4 {
    color: #ffa500;
}

.mulligan-section.never-keep h4 {
    color: #e4007c;
}

.mulligan-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mulligan-card-list li {
    padding: 0;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border-left: 3px solid;
    transition: all 0.2s ease;
    overflow: hidden;
}

.mulligan-card-item {
    display: flex;
    align-items: center;
    width: 100%;
}

.mulligan-card-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mulligan-card-link:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.08);
}

.mulligan-card-link:hover .mulligan-card-image {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

.mulligan-card-image {
    width: 60px;
    height: 84px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.mulligan-card-name {
    flex: 1;
    color: #f0f0f0;
    font-size: 0.95rem;
    cursor: pointer;
}

.mulligan-card-name-fallback {
    color: #f0f0f0;
    font-size: 0.95rem;
}

.always-keep .mulligan-card-list li {
    border-left-color: #00B337;
}

.usually-keep .mulligan-card-list li {
    border-left-color: #ffa500;
}

.never-keep .mulligan-card-list li {
    border-left-color: #e4007c;
}

.mulligan-card-list li:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.mulligan-tips {
    background: rgba(0, 179, 55, 0.1);
    border: 1px solid rgba(0, 179, 55, 0.3);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.mulligan-tips i {
    color: #00B337;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.mulligan-tips p {
    margin: 0;
    color: #f0f0f0;
    line-height: 1.6;
}

/* Sideboard Guide Widget */
.sideboard-guide-container {
    margin-top: 1rem;
}

/* Sideboard Type Sections (Aggro, Control, etc.) */
.sideboard-type-section {
    margin-bottom: 2.5rem;
}

.sideboard-type-section:last-child {
    margin-bottom: 0;
}

.sideboard-type-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sideboard-matchup {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sideboard-matchup:hover {
    border-color: rgba(0, 179, 55, 0.3);
}

.matchup-header {
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.matchup-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.matchup-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.matchup-title h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #f0f0f0;
}

.matchup-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matchup-difficulty.favorable {
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
    border: 1px solid rgba(0, 179, 55, 0.5);
}

.matchup-difficulty.even {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.5);
}

.matchup-difficulty.unfavorable {
    background: rgba(228, 0, 124, 0.2);
    color: #e4007c;
    border: 1px solid rgba(228, 0, 124, 0.5);
}

.matchup-toggle {
    font-size: 1.2rem;
    color: #9a9a9a;
    transition: transform 0.3s ease;
}

.matchup-toggle.rotated {
    transform: rotate(180deg);
}

.matchup-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sideboard-changes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0;
}

.sideboard-in h4,
.sideboard-out h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.sideboard-in h4 {
    color: #00B337;
}

.sideboard-out h4 {
    color: #e4007c;
}

.sideboard-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sideboard-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid;
}

.sideboard-in .sideboard-card-list li {
    border-left-color: #00B337;
}

.sideboard-out .sideboard-card-list li {
    border-left-color: #e4007c;
}

.sideboard-card-list .card-count {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 30px;
}

.sideboard-in .card-count {
    color: #00B337;
}

.sideboard-out .card-count {
    color: #e4007c;
}

.sideboard-card-list .card-name {
    font-weight: 600;
    color: #f0f0f0;
    flex: 1;
}

.sideboard-card-list .card-reason {
    color: #9a9a9a;
    font-size: 0.85rem;
    font-style: italic;
    flex: 1.5;
}

.matchup-gameplan {
    background: rgba(0, 179, 55, 0.05);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.matchup-gameplan h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00B337;
    font-size: 1.1rem;
    margin: 0 0 0.75rem 0;
}

.matchup-gameplan p {
    margin: 0;
    line-height: 1.7;
    color: #f0f0f0;
}

.matchup-key-cards {
    margin-top: 1.5rem;
}

.matchup-key-cards h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffa500;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.key-cards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.key-cards-list li {
    padding: 0.5rem 1rem;
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 20px;
    color: #ffa500;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Video Chapters Widget */
.video-chapters {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.video-chapters h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00B337;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.chapters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chapter-item:hover {
    background: rgba(0, 179, 55, 0.1);
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateX(4px);
}

.chapter-time {
    font-weight: 700;
    color: #00B337;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    min-width: 50px;
}

.chapter-label {
    flex: 1;
    color: #f0f0f0;
    font-weight: 500;
}

.chapter-item i {
    color: #9a9a9a;
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

.chapter-item:hover i {
    color: #00B337;
}

/* Mobile Responsive for New Widgets */
@media (max-width: 768px) {
    .deck-ratings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .format-legality-badges {
        flex-direction: column;
    }
    
    .format-badge {
        width: 100%;
    }
    
    .mulligan-guide-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sideboard-changes {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sideboard-card-list .card-reason {
        display: block;
        margin-top: 0.25rem;
        margin-left: 40px;
    }
    
    .matchup-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .chapters-list {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   DECK SNAPSHOT - SCREENSHOTTABLE
   =================================== */
.deck-snapshot-branded {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 2px solid #00B337;
    border-radius: 12px;
    padding: 0;
    margin: 2rem 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 179, 55, 0.2);
    max-width: 1200px;
}

.deck-snapshot-branded-content {
    padding: 1.5rem;
}

.deck-snapshot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 2px solid #00B337;
    margin-bottom: 1.5rem;
}

.deck-snapshot-title-block {
    flex: 1;
}

.deck-snapshot-deck-name {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.deck-snapshot-deck-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.deck-snapshot-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    background: rgba(0, 179, 55, 0.15);
    border: 1px solid #00B337;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #00B337;
    font-weight: 600;
}

.deck-snapshot-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.deck-snapshot-logo {
    font-size: 1.6rem;
    font-weight: bold;
    background: linear-gradient(135deg, #00B337, #00B337);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.deck-snapshot-url {
    font-size: 0.75rem;
    color: #9a9a9a;
}

.deck-snapshot-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.deck-snapshot-stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
}

.deck-snapshot-stat-label {
    font-size: 0.75rem;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.deck-snapshot-stat-value {
    font-size: 1.6rem;
    font-weight: bold;
    color: #00B337;
}

.deck-snapshot-stat-value.price {
    color: #ffa500;
}

.deck-snapshot-key-cards {
    margin-bottom: 1rem;
}

.deck-snapshot-key-cards h4 {
    font-size: 1rem;
    color: #00B337;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deck-snapshot-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
}

.deck-snapshot-card-mini {
    position: relative;
    aspect-ratio: 5/7;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.deck-snapshot-card-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 179, 55, 0.3);
}

.deck-snapshot-card-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deck-snapshot-card-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: #00B337;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #00B337;
}

.deck-snapshot-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.deck-snapshot-share-text {
    font-size: 0.85rem;
    color: #9a9a9a;
}

.deck-snapshot-share-text i {
    color: #00B337;
    margin-right: 0.4rem;
}

/* Responsive Design for Deck Snapshot */
@media (max-width: 768px) {
    .deck-snapshot-deck-name {
        font-size: 1.4rem;
    }
    
    .deck-snapshot-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .deck-snapshot-cards-row {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
    
    .deck-snapshot-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .deck-snapshot-branding {
        align-items: flex-start;
    }
}

/* ===================================
   VARIANTS & FLEX SLOTS WIDGET
   =================================== */
.variants-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
}

.variant-slot {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.variant-slot:hover {
    border-color: rgba(0, 179, 55, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.variant-slot-header h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #00B337;
    font-size: 1.2rem;
    margin: 0 0 1.5rem 0;
}

.variant-slot-header i {
    font-size: 1.1rem;
}

.variant-card-label {
    font-size: 0.85rem;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.variant-core-card {
    margin-bottom: 1.5rem;
}

.variant-card-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.variant-card-item.core {
    border-color: rgba(0, 179, 55, 0.5);
    background: rgba(0, 179, 55, 0.05);
}

.variant-card-item.alternative {
    border-color: rgba(255, 255, 255, 0.1);
}

.variant-card-item:hover {
    border-color: #00B337;
    transform: translateX(4px);
}

.variant-card-img {
    width: 60px;
    height: 84px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.variant-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.variant-card-name {
    font-weight: 600;
    color: #f0f0f0;
    font-size: 1rem;
}

.variant-card-reason {
    color: #9a9a9a;
    font-size: 0.9rem;
    line-height: 1.4;
}

.variant-vs-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 4px;
    color: #ffa500;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
}

.variant-buy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #00B337;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.variant-buy-link:hover {
    color: #00B337;
}

.variant-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ===================================
   BUDGET VS OPTIMIZED COMPARISON WIDGET
   =================================== */
#budget-comparison-widget {
    margin: 2rem 0;
}

.budget-comparison-description {
    color: #9a9a9a;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.budget-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.budget-column {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 179, 55, 0.2);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.budget-column:hover {
    border-color: rgba(0, 179, 55, 0.3);
}

.budget-column-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
}

.budget-column-header.budget {
    background: rgba(255, 165, 0, 0.1);
    border-color: rgba(255, 165, 0, 0.3);
}

.budget-column-header.optimized {
    background: rgba(0, 179, 55, 0.1);
    border-color: rgba(0, 179, 55, 0.3);
}

.budget-column-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.2rem;
    color: #f0f0f0;
}

.budget-column-cost {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B337;
}

.budget-cards-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.budget-card-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.budget-card-item:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: #00B337;
}

.budget-card-img {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.budget-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.budget-card-name {
    font-weight: 600;
    color: #f0f0f0;
    font-size: 0.95rem;
}

.budget-card-price {
    color: #ffa500;
    font-weight: 700;
    font-size: 1rem;
}

.budget-buy-link {
    color: #00B337;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.budget-buy-link:hover {
    color: #00B337;
}

.budget-card-empty {
    height: 92px;
}

.budget-comparison-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.budget-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.budget-summary-item span {
    color: #9a9a9a;
    font-size: 0.9rem;
}

.budget-summary-item strong {
    color: #f0f0f0;
    font-size: 1.3rem;
}

.budget-summary-item.highlight strong {
    color: #00B337;
    font-size: 1.5rem;
}

/* ===================================
   META POSITION & MATCHUPS - ENHANCED
   =================================== */
.meta-position-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.meta-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(0, 179, 55, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.meta-stat:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #00B337;
    transform: translateY(-2px);
}

.meta-stat > i {
    font-size: 2.5rem;
    color: #00B337;
}

.meta-stat-content {
    flex: 1;
}

.meta-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00B337;
    line-height: 1.2;
}

.meta-stat-label {
    font-size: 0.85rem;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matchups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.matchup-category {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid;
}

.matchup-category.favorable {
    border-color: rgba(0, 179, 55, 0.3);
}

.matchup-category.unfavorable {
    border-color: rgba(228, 0, 124, 0.3);
}

.matchup-category-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid;
}

.matchup-category.favorable .matchup-category-header {
    background: rgba(0, 179, 55, 0.1);
    border-color: rgba(0, 179, 55, 0.3);
}

.matchup-category.unfavorable .matchup-category-header {
    background: rgba(228, 0, 124, 0.1);
    border-color: rgba(228, 0, 124, 0.3);
}

.matchup-category-header i {
    font-size: 1.5rem;
}

.matchup-category.favorable .matchup-category-header i {
    color: #00B337;
}

.matchup-category.unfavorable .matchup-category-header i {
    color: #e4007c;
}

.matchup-category-header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.2rem;
    color: #f0f0f0;
}

.matchup-win-rate {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.matchup-win-rate.positive {
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
}

.matchup-win-rate.negative {
    background: rgba(228, 0, 124, 0.2);
    color: #e4007c;
}

.matchup-items {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.matchup-item {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.matchup-category.favorable .matchup-item {
    border-color: #00B337;
}

.matchup-category.unfavorable .matchup-item {
    border-color: #e4007c;
}

.matchup-item:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(4px);
}

.matchup-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.matchup-item-header h4 {
    margin: 0;
    color: #f0f0f0;
    font-size: 1.1rem;
}

.matchup-percentage {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

.matchup-percentage.positive {
    background: rgba(0, 179, 55, 0.2);
    color: #00B337;
}

.matchup-percentage.negative {
    background: rgba(228, 0, 124, 0.2);
    color: #e4007c;
}

.matchup-percentage.even {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
}

.matchup-item p {
    margin: 0 0 0.75rem 0;
    color: #9a9a9a;
    line-height: 1.6;
    font-size: 0.95rem;
}

.matchup-keys {
    padding: 0.75rem;
    background: rgba(0, 179, 55, 0.1);
    border-left: 2px solid #00B337;
    border-radius: 4px;
    font-size: 0.9rem;
}

.matchup-keys strong {
    color: #00B337;
}

/* Responsive for Matchups */
@media (max-width: 768px) {
    .meta-position-summary {
        grid-template-columns: 1fr;
    }
    
    .matchups-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive for Variants & Budget Widgets */
@media (max-width: 768px) {
    .variant-alternatives-grid {
        grid-template-columns: 1fr;
    }
    
    .budget-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .budget-comparison-summary {
        grid-template-columns: 1fr;
    }
    
    .variant-card-item {
        flex-direction: column;
        text-align: center;
    }
    
    .variant-vs-tag {
        margin: 0 auto;
    }
}


/* ============================================================================
   PERFECT DECK BREAKDOWN - Deckbuilder Style Layout with Dynamic Theming
   
   VIEWPORT OPTIMIZED FOR 1920x1080 SCREENSHOTS:
   - Compact spacing and padding for maximum density
   - 10x4 main deck grid, 8x1 sideboard grid maintained
   - Reduced font sizes and gaps to fit entire widget on screen
   - Perfect for social media sharing without zooming out
   ============================================================================ */

.deck-breakdown-perfect {
    background: rgba(20, 20, 20, 0.95);
    border: 4px solid rgba(60, 60, 60, 0.8);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0;
    position: relative;
    transition: all 0.5s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Dynamic Domain-Based Themes - Official Riftbound Colors */
.deck-breakdown-perfect[data-rune-theme="fury"] {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(216, 31, 31, 0.6);
    box-shadow: 0 0 30px rgba(216, 31, 31, 0.2);
}

.deck-breakdown-perfect[data-rune-theme="calm"] {
    background: linear-gradient(135deg, rgba(79, 142, 51, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(79, 142, 51, 0.6);
    box-shadow: 0 0 30px rgba(79, 142, 51, 0.2);
}

.deck-breakdown-perfect[data-rune-theme="mind"] {
    background: linear-gradient(135deg, rgba(45, 113, 162, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(45, 113, 162, 0.6);
    box-shadow: 0 0 30px rgba(45, 113, 162, 0.2);
}

.deck-breakdown-perfect[data-rune-theme="body"] {
    background: linear-gradient(135deg, rgba(230, 116, 17, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(230, 116, 17, 0.6);
    box-shadow: 0 0 30px rgba(230, 116, 17, 0.2);
}

.deck-breakdown-perfect[data-rune-theme="chaos"] {
    background: linear-gradient(135deg, rgba(68, 46, 109, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(68, 46, 109, 0.6);
    box-shadow: 0 0 30px rgba(68, 46, 109, 0.2);
}

.deck-breakdown-perfect[data-rune-theme="order"] {
    background: linear-gradient(135deg, rgba(209, 173, 12, 0.15), rgba(20, 20, 20, 0.95));
    border: 4px solid rgba(209, 173, 12, 0.6);
    box-shadow: 0 0 30px rgba(209, 173, 12, 0.2);
}

/* Dual-Color Gradients (when deck uses 2+ rune types) - More Prominent */
/* Fury + Chaos (Red → Purple) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-perfect,
.deck-breakdown-perfect[data-rune-theme="fury"][data-rune-theme-secondary="chaos"],
.deck-breakdown-perfect[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.35) 0%, rgba(142, 38, 70, 0.3) 50%, rgba(68, 46, 109, 0.35) 100%), rgba(20, 20, 20, 0.95) !important;
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(216, 31, 31, 0.9), rgba(68, 46, 109, 0.9)) 1 !important;
    box-shadow: 0 0 40px rgba(216, 31, 31, 0.3), 0 0 40px rgba(68, 46, 109, 0.3) !important;
}

/* Fury + Calm (Red → Green) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-perfect,
.deck-breakdown-perfect[data-rune-theme="fury"][data-rune-theme-secondary="calm"],
.deck-breakdown-perfect[data-rune-theme="calm"][data-rune-theme-secondary="fury"] {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.35) 0%, rgba(147, 86, 41, 0.3) 50%, rgba(79, 142, 51, 0.35) 100%), rgba(20, 20, 20, 0.95) !important;
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(216, 31, 31, 0.9), rgba(79, 142, 51, 0.9)) 1 !important;
    box-shadow: 0 0 40px rgba(216, 31, 31, 0.3), 0 0 40px rgba(79, 142, 51, 0.3) !important;
}

/* Mind + Body (Blue → Orange) */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(45, 113, 162, 0.35) 0%, rgba(137, 114, 89, 0.3) 50%, rgba(230, 116, 17, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(45, 113, 162, 0.9), rgba(230, 116, 17, 0.9)) 1 !important;
    box-shadow: 0 0 40px rgba(45, 113, 162, 0.3), 0 0 40px rgba(230, 116, 17, 0.3);
}

/* Calm + Mind (Green → Blue) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(79, 142, 51, 0.35) 0%, rgba(62, 127, 106, 0.3) 50%, rgba(45, 113, 162, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(79, 142, 51, 0.9), rgba(45, 113, 162, 0.9)) 1 !important;
    box-shadow: 0 0 40px rgba(79, 142, 51, 0.3), 0 0 40px rgba(45, 113, 162, 0.3);
}

/* Order + Chaos (Gold → Purple) */
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(209, 173, 12, 0.35) 0%, rgba(138, 109, 60, 0.3) 50%, rgba(68, 46, 109, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(209, 173, 12, 0.9), rgba(68, 46, 109, 0.9)) 1 !important;
    box-shadow: 0 0 40px rgba(209, 173, 12, 0.3), 0 0 40px rgba(68, 46, 109, 0.3);
}

/* Mind + Chaos (Blue → Purple) - MISSING COMBINATION */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="chaos"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="mind"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(45, 113, 162, 0.35) 0%, rgba(56, 79, 135, 0.3) 50%, rgba(68, 46, 109, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(45, 113, 162, 0.9), rgba(68, 46, 109, 0.9)) 1;
    box-shadow: 0 0 40px rgba(45, 113, 162, 0.3), 0 0 40px rgba(68, 46, 109, 0.3);
}

/* Fury + Mind (Red → Blue) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="mind"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="fury"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.35) 0%, rgba(130, 72, 96, 0.3) 50%, rgba(45, 113, 162, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(216, 31, 31, 0.9), rgba(45, 113, 162, 0.9)) 1;
    box-shadow: 0 0 40px rgba(216, 31, 31, 0.3), 0 0 40px rgba(45, 113, 162, 0.3);
}

/* Fury + Body (Red → Orange) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="body"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="fury"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.35) 0%, rgba(223, 73, 24, 0.3) 50%, rgba(230, 116, 17, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(216, 31, 31, 0.9), rgba(230, 116, 17, 0.9)) 1;
    box-shadow: 0 0 40px rgba(216, 31, 31, 0.3), 0 0 40px rgba(230, 116, 17, 0.3);
}

/* Fury + Order (Red → Gold) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="order"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="fury"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.35) 0%, rgba(212, 102, 21, 0.3) 50%, rgba(209, 173, 12, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(216, 31, 31, 0.9), rgba(209, 173, 12, 0.9)) 1;
    box-shadow: 0 0 40px rgba(216, 31, 31, 0.3), 0 0 40px rgba(209, 173, 12, 0.3);
}

/* Calm + Body (Green → Orange) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="body"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="calm"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(79, 142, 51, 0.35) 0%, rgba(154, 129, 34, 0.3) 50%, rgba(230, 116, 17, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(79, 142, 51, 0.9), rgba(230, 116, 17, 0.9)) 1;
    box-shadow: 0 0 40px rgba(79, 142, 51, 0.3), 0 0 40px rgba(230, 116, 17, 0.3);
}

/* Calm + Chaos (Green → Purple) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="chaos"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="calm"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(79, 142, 51, 0.35) 0%, rgba(73, 94, 80, 0.3) 50%, rgba(68, 46, 109, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(79, 142, 51, 0.9), rgba(68, 46, 109, 0.9)) 1;
    box-shadow: 0 0 40px rgba(79, 142, 51, 0.3), 0 0 40px rgba(68, 46, 109, 0.3);
}

/* Calm + Order (Green → Gold) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="order"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="calm"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(79, 142, 51, 0.35) 0%, rgba(144, 157, 21, 0.3) 50%, rgba(209, 173, 12, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(79, 142, 51, 0.9), rgba(209, 173, 12, 0.9)) 1;
    box-shadow: 0 0 40px rgba(79, 142, 51, 0.3), 0 0 40px rgba(209, 173, 12, 0.3);
}

/* Mind + Order (Blue → Gold) */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="order"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="mind"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(45, 113, 162, 0.35) 0%, rgba(127, 143, 87, 0.3) 50%, rgba(209, 173, 12, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(45, 113, 162, 0.9), rgba(209, 173, 12, 0.9)) 1;
    box-shadow: 0 0 40px rgba(45, 113, 162, 0.3), 0 0 40px rgba(209, 173, 12, 0.3);
}

/* Body + Chaos (Orange → Purple) */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="chaos"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="body"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(230, 116, 17, 0.35) 0%, rgba(149, 81, 63, 0.3) 50%, rgba(68, 46, 109, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(230, 116, 17, 0.9), rgba(68, 46, 109, 0.9)) 1;
    box-shadow: 0 0 40px rgba(230, 116, 17, 0.3), 0 0 40px rgba(68, 46, 109, 0.3);
}

/* Body + Order (Orange → Gold) */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="order"] .deck-breakdown-perfect,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="body"] .deck-breakdown-perfect {
    background: linear-gradient(135deg, rgba(230, 116, 17, 0.35) 0%, rgba(219, 144, 14, 0.3) 50%, rgba(209, 173, 12, 0.35) 100%), rgba(20, 20, 20, 0.95);
    border: 4px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(230, 116, 17, 0.9), rgba(209, 173, 12, 0.9)) 1;
    box-shadow: 0 0 40px rgba(230, 116, 17, 0.3), 0 0 40px rgba(209, 173, 12, 0.3);
}

/* Secondary Rune Color Variables for Header Border */
#deck-breakdown-widget[data-rune-theme-secondary="fury"] {
    --secondary-rune-border: rgba(216, 31, 31, 0.8);
}
#deck-breakdown-widget[data-rune-theme-secondary="calm"] {
    --secondary-rune-border: rgba(79, 142, 51, 0.8);
}
#deck-breakdown-widget[data-rune-theme-secondary="mind"] {
    --secondary-rune-border: rgba(45, 113, 162, 0.8);
}
#deck-breakdown-widget[data-rune-theme-secondary="body"] {
    --secondary-rune-border: rgba(230, 116, 17, 0.8);
}
#deck-breakdown-widget[data-rune-theme-secondary="chaos"] {
    --secondary-rune-border: rgba(68, 46, 109, 0.8);
}
#deck-breakdown-widget[data-rune-theme-secondary="order"] {
    --secondary-rune-border: rgba(209, 173, 12, 0.8);
}

.deck-breakdown-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding: 0.75rem 0;
    padding-bottom: 0.5rem;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 4px solid var(--secondary-rune-border, rgba(0, 179, 55, 0.6));
    border-image: none;
    gap: 1rem;
}

.deck-breakdown-branding {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.deck-breakdown-logo {
    height: 50px;
    width: auto;
    min-height: 100px;
    flex-shrink: 0;
}

.deck-breakdown-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.deck-breakdown-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.deck-breakdown-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #00B337;
    margin: 0;
    line-height: 1.2;
}

#deck-breakdown-deck-name {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#deck-attribution {
    font-size: 0.65rem;
    color: rgba(156, 163, 175, 0.7);
    margin-top: 0.15rem;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.deck-breakdown-cost {
    text-align: right;
    white-space: nowrap;
}

.deck-cost-label {
    color: #9a9a9a;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

.deck-cost-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00B337;
}

.deck-breakdown-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Section Titles - Dynamic Theming */
.section-title {
    color: #f0f0f0;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-title span {
    color: #9CA3AF;
}

/* Dynamic Section Title Colors based on Domain Theme */
.deck-breakdown-perfect[data-rune-theme="fury"] .section-title { color: rgba(255, 120, 120, 1); }
.deck-breakdown-perfect[data-rune-theme="calm"] .section-title { color: rgba(150, 220, 130, 1); }
.deck-breakdown-perfect[data-rune-theme="mind"] .section-title { color: rgba(130, 190, 240, 1); }
.deck-breakdown-perfect[data-rune-theme="body"] .section-title { color: rgba(255, 180, 120, 1); }
.deck-breakdown-perfect[data-rune-theme="chaos"] .section-title { color: rgba(180, 150, 230, 1); }
.deck-breakdown-perfect[data-rune-theme="order"] .section-title { color: rgba(255, 235, 100, 1); }

/* Top Row: Legend (with inline runes), Battlefields */
.deck-breakdown-top {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem;
    min-height: auto;
    align-items: start;
}

/* Main Deck - 10x4 Grid (Now Below) */
.deck-breakdown-main {
    background: rgba(30, 30, 30, 0.25);
    border: 2px solid var(--secondary-rune-border);
    border-radius: 8px;
    padding: 0.6rem;
    transition: all 0.5s ease;
}

.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-main { border-color: rgba(216, 31, 31, 0.5); }
.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-main { border-color: rgba(79, 142, 51, 0.5); }
.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-main { border-color: rgba(45, 113, 162, 0.5); }
.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-main { border-color: rgba(230, 116, 17, 0.5); }
.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-main { border-color: rgba(68, 46, 109, 0.5); }
.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-main { border-color: rgba(209, 173, 12, 0.5); }

.deck-breakdown-main-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.35rem;
    min-height: auto;
}

/* Legend Box - Single Large Card with Runes Below */
.deck-breakdown-legend-box {
    background: rgba(30, 30, 30, 0);
    border: none;
    border-radius: 8px;
    padding: 0.6rem;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-legend-box { border-color: rgba(216, 31, 31, 0.5); }
.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-legend-box { border-color: rgba(79, 142, 51, 0.5); }
.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-legend-box { border-color: rgba(45, 113, 162, 0.5); }
.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-legend-box { border-color: rgba(230, 116, 17, 0.5); }
.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-legend-box { border-color: rgba(68, 46, 109, 0.5); }
.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-legend-box { border-color: rgba(209, 173, 12, 0.5); }

.deck-breakdown-legend-single {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
}

/* Runes Inline Display (below legend card) */
.deck-breakdown-runes-inline {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.3rem;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

#deck-breakdown-runes-content {
    background-color: rgba(30, 30, 30, 0.8);
    border: 0px none rgba(0, 0, 0, 0);
    border-radius: 8px;
}

/* No longer needed - battlefields is directly in grid */

.deck-breakdown-battlefields-box,
.deck-breakdown-runes-box {
    background: rgba(30, 30, 30, 0);
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deck-breakdown-battlefields-box {
    background: unset;
}

.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-runes-box { border-color: rgba(216, 31, 31, 0.5); }
.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-runes-box { border-color: rgba(79, 142, 51, 0.5); }
.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-runes-box { border-color: rgba(45, 113, 162, 0.5); }
.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-runes-box { border-color: rgba(230, 116, 17, 0.5); }
.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-runes-box { border-color: rgba(68, 46, 109, 0.5); }
.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-battlefields-box,
.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-runes-box { border-color: rgba(209, 173, 12, 0.5); }

#deck-battlefields-count {
    visibility: hidden;
}

.deck-breakdown-battlefields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    min-height: auto;
    justify-items: center;
    align-items: center;
}

/* Battlefield Cards - Always Horizontal Orientation - Larger for Better Visibility */
.deck-breakdown-battlefields-grid .deck-breakdown-card {
    aspect-ratio: 1.4 / 1; /* Landscape orientation */
    height: auto;
    width: 100%;
    max-width: none; /* Remove max-width to allow full grid expansion */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.deck-breakdown-battlefields-grid .deck-breakdown-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
}

/* Rotate Vertical Card Images to Horizontal */
.deck-breakdown-battlefields-grid .deck-breakdown-card.rotate-vertical-card img {
    transform: rotate(90deg);
    width: auto;
    height: 140%;
    max-height: none;
    border-radius: 12px;
}

.deck-breakdown-battlefields-grid .deck-breakdown-card.rotate-vertical-card {
    overflow: hidden;
    border-radius: 6px;
}

.deck-breakdown-runes-display {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0.3rem 0;
    flex-wrap: wrap;
}

.deck-breakdown-rune-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.deck-breakdown-rune-item:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Domain-specific rune colors - Official Riftbound Colors */
.deck-breakdown-rune-item[data-rune="fury"] { 
    border-color: rgba(216, 31, 31, 0.6); 
    background: rgba(216, 31, 31, 0.15);
}
.deck-breakdown-rune-item[data-rune="calm"] { 
    border-color: rgba(79, 142, 51, 0.6); 
    background: rgba(79, 142, 51, 0.15);
}
.deck-breakdown-rune-item[data-rune="mind"] { 
    border-color: rgba(45, 113, 162, 0.6); 
    background: rgba(45, 113, 162, 0.15);
}
.deck-breakdown-rune-item[data-rune="body"] { 
    border-color: rgba(230, 116, 17, 0.6); 
    background: rgba(230, 116, 17, 0.15);
}
.deck-breakdown-rune-item[data-rune="chaos"] { 
    border-color: rgba(68, 46, 109, 0.6); 
    background: rgba(68, 46, 109, 0.15);
}
.deck-breakdown-rune-item[data-rune="order"] { 
    border-color: rgba(209, 173, 12, 0.6); 
    background: rgba(209, 173, 12, 0.15);
}

.deck-breakdown-rune-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.deck-breakdown-rune-icon .rune-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.deck-breakdown-rune-count {
    font-size: 0.85rem;
    font-weight: bold;
    color: #f0f0f0;
    min-width: 14px;
    text-align: center;
}

/* Sideboard Box - Full Width Below Main Deck (Hidden by default, shown by JS when needed) */
.deck-breakdown-sideboard-box {
    background: rgba(30, 30, 30, 0.25);
    border: 2px solid var(--secondary-rune-border);
    border-radius: 8px;
    padding: 0.6rem;
    transition: all 0.5s ease;
    margin-top: 0.5rem;
    display: none; /* Hidden by default */
}

.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-sideboard-box { border-color: rgba(216, 31, 31, 0.5); }
.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-sideboard-box { border-color: rgba(79, 142, 51, 0.5); }
.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-sideboard-box { border-color: rgba(45, 113, 162, 0.5); }
.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-sideboard-box { border-color: rgba(230, 116, 17, 0.5); }
.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-sideboard-box { border-color: rgba(68, 46, 109, 0.5); }
.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-sideboard-box { border-color: rgba(209, 173, 12, 0.5); }

.deck-breakdown-sideboard-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
    gap: 0.35rem;
    min-height: auto;
}

/* Card Display - Interactive - Scaled for Viewport Fit */
.deck-breakdown-card {
    position: relative;
    aspect-ratio: 5 / 7;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
}

.deck-breakdown-card:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(0, 179, 55, 0.8);
    box-shadow: 0 12px 30px rgba(0, 179, 55, 0.4), 0 0 20px rgba(0, 179, 55, 0.3);
    z-index: 10;
    filter: brightness(1.15);
}

.deck-breakdown-card:active {
    transform: translateY(-2px) scale(1.02);
}


/* Loading Placeholder State */
.deck-breakdown-card.loading {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: cardShimmer 1.5s ease-in-out infinite;
    cursor: default;
    border-color: rgba(255, 255, 255, 0.2);
}

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

/* Skeleton Loading - Better Placeholder */
.deck-breakdown-card.skeleton {
    background: rgba(40, 40, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.deck-breakdown-card.skeleton .skeleton-image {
    width: 100%;
    height: 70%;
    background: linear-gradient(
        90deg,
        rgba(60, 60, 60, 0.3) 0%,
        rgba(80, 80, 80, 0.5) 50%,
        rgba(60, 60, 60, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: cardShimmer 1.5s ease-in-out infinite;
    border-radius: 4px 4px 0 0;
}

.deck-breakdown-card.skeleton .skeleton-price {
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
    width: 40%;
    height: 0.6rem;
    background: linear-gradient(
        90deg,
        rgba(60, 60, 60, 0.3) 0%,
        rgba(80, 80, 80, 0.5) 50%,
        rgba(60, 60, 60, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: cardShimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
}

/* Fade-in Animation */
.deck-breakdown-card.fade-in {
    opacity: 0;
    animation: fadeInCard 0.4s ease-in forwards;
}

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

/* Color-coded Card Types - Subtle Background Tints */
.deck-breakdown-card.card-type-unit {
    background: linear-gradient(135deg, rgba(216, 31, 31, 0.08), rgba(0, 0, 0, 0.3));
}

.deck-breakdown-card.card-type-spell {
    background: linear-gradient(135deg, rgba(45, 113, 162, 0.08), rgba(0, 0, 0, 0.3));
}

.deck-breakdown-card.card-type-gear {
    background: linear-gradient(135deg, rgba(230, 116, 17, 0.08), rgba(0, 0, 0, 0.3));
}

/* Empty State */
.deck-breakdown-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: rgba(156, 163, 175, 0.6);
    font-size: 0.9rem;
    font-style: italic;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

/* Always Show Count Badge */
.deck-breakdown-card-count {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: rgba(0, 0, 0, 0.8);
    color: #00B337;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 2;
    border: 1px solid rgba(0, 179, 55, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}


/* Champion Card Indicator - Domain-Based Colors (No Animation) */
/* Fury (Red) */
.deck-breakdown-card.champion[data-domain="fury"] {
    border: 5px solid rgba(216, 31, 31, 1);
    box-shadow: 0 0 25px rgba(216, 31, 31, 0.8), inset 0 0 30px rgba(216, 31, 31, 0.3);
}

.deck-breakdown-card.champion[data-domain="fury"]:hover {
    border-color: rgba(216, 31, 31, 1);
    box-shadow: 0 0 35px rgba(216, 31, 31, 0.9), inset 0 0 40px rgba(216, 31, 31, 0.4);
}

/* Calm (Green) */
.deck-breakdown-card.champion[data-domain="calm"] {
    border: 5px solid rgba(79, 142, 51, 1);
    box-shadow: 0 0 25px rgba(79, 142, 51, 0.8), inset 0 0 30px rgba(79, 142, 51, 0.3);
}

.deck-breakdown-card.champion[data-domain="calm"]:hover {
    border-color: rgba(79, 142, 51, 1);
    box-shadow: 0 0 35px rgba(79, 142, 51, 0.9), inset 0 0 40px rgba(79, 142, 51, 0.4);
}

/* Mind (Blue) */
.deck-breakdown-card.champion[data-domain="mind"] {
    border: 5px solid rgba(45, 113, 162, 1);
    box-shadow: 0 0 25px rgba(45, 113, 162, 0.8), inset 0 0 30px rgba(45, 113, 162, 0.3);
}

.deck-breakdown-card.champion[data-domain="mind"]:hover {
    border-color: rgba(45, 113, 162, 1);
    box-shadow: 0 0 35px rgba(45, 113, 162, 0.9), inset 0 0 40px rgba(45, 113, 162, 0.4);
}

/* Body (Orange) */
.deck-breakdown-card.champion[data-domain="body"] {
    border: 5px solid rgba(230, 116, 17, 1);
    box-shadow: 0 0 25px rgba(230, 116, 17, 0.8), inset 0 0 30px rgba(230, 116, 17, 0.3);
}

.deck-breakdown-card.champion[data-domain="body"]:hover {
    border-color: rgba(230, 116, 17, 1);
    box-shadow: 0 0 35px rgba(230, 116, 17, 0.9), inset 0 0 40px rgba(230, 116, 17, 0.4);
}

/* Chaos (Purple) */
.deck-breakdown-card.champion[data-domain="chaos"] {
    border: 5px solid rgba(68, 46, 109, 1);
    box-shadow: 0 0 25px rgba(68, 46, 109, 0.8), inset 0 0 30px rgba(68, 46, 109, 0.3);
}

.deck-breakdown-card.champion[data-domain="chaos"]:hover {
    border-color: rgba(68, 46, 109, 1);
    box-shadow: 0 0 35px rgba(68, 46, 109, 0.9), inset 0 0 40px rgba(68, 46, 109, 0.4);
}

/* Order (Gold) */
.deck-breakdown-card.champion[data-domain="order"] {
    border: 5px solid rgba(209, 173, 12, 1);
    box-shadow: 0 0 25px rgba(209, 173, 12, 0.8), inset 0 0 30px rgba(209, 173, 12, 0.3);
}

.deck-breakdown-card.champion[data-domain="order"]:hover {
    border-color: rgba(209, 173, 12, 1);
    box-shadow: 0 0 35px rgba(209, 173, 12, 0.9), inset 0 0 40px rgba(209, 173, 12, 0.4);
}

/* Champion Card - Dual Rune Theme Gradient Borders (Using Background Gradient with Padding) */
/* Fury + Chaos (Red → Purple) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(216, 31, 31, 1), rgba(68, 46, 109, 1));
    box-shadow: 
        0 0 25px rgba(216, 31, 31, 0.8), 
        0 0 25px rgba(68, 46, 109, 0.8);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Fury + Calm (Red → Green) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(216, 31, 31, 1), rgba(79, 142, 51, 1));
    box-shadow: 
        0 0 25px rgba(216, 31, 31, 0.8), 
        0 0 25px rgba(79, 142, 51, 0.8);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Mind + Body (Blue → Orange) */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(45, 113, 162, 1), rgba(230, 116, 17, 1));
    box-shadow: 
        0 0 25px rgba(45, 113, 162, 0.8), 
        0 0 25px rgba(230, 116, 17, 0.8);
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Calm + Mind (Green → Blue) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(79, 142, 51, 1), rgba(45, 113, 162, 1));
    box-shadow: 
        0 0 25px rgba(79, 142, 51, 0.8), 
        0 0 25px rgba(45, 113, 162, 0.8);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Order + Chaos (Gold → Purple) */
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(209, 173, 12, 1), rgba(68, 46, 109, 1));
    box-shadow: 
        0 0 25px rgba(209, 173, 12, 0.8), 
        0 0 25px rgba(68, 46, 109, 0.8);
}

#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Mind + Chaos (Blue → Purple) - MISSING COMBINATION */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(45, 113, 162, 1), rgba(68, 46, 109, 1));
    box-shadow: 
        0 0 25px rgba(45, 113, 162, 0.8), 
        0 0 25px rgba(68, 46, 109, 0.8);
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Fury + Mind (Red → Blue) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(216, 31, 31, 1), rgba(45, 113, 162, 1));
    box-shadow: 
        0 0 25px rgba(216, 31, 31, 0.8), 
        0 0 25px rgba(45, 113, 162, 0.8);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Fury + Body (Red → Orange) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(216, 31, 31, 1), rgba(230, 116, 17, 1));
    box-shadow: 
        0 0 25px rgba(216, 31, 31, 0.8), 
        0 0 25px rgba(230, 116, 17, 0.8);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Fury + Order (Red → Gold) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(216, 31, 31, 1), rgba(209, 173, 12, 1));
    box-shadow: 
        0 0 25px rgba(216, 31, 31, 0.8), 
        0 0 25px rgba(209, 173, 12, 0.8);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Calm + Body (Green → Orange) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(79, 142, 51, 1), rgba(230, 116, 17, 1));
    box-shadow: 
        0 0 25px rgba(79, 142, 51, 0.8), 
        0 0 25px rgba(230, 116, 17, 0.8);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Calm + Chaos (Green → Purple) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(79, 142, 51, 1), rgba(68, 46, 109, 1));
    box-shadow: 
        0 0 25px rgba(79, 142, 51, 0.8), 
        0 0 25px rgba(68, 46, 109, 0.8);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Calm + Order (Green → Gold) */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(79, 142, 51, 1), rgba(209, 173, 12, 1));
    box-shadow: 
        0 0 25px rgba(79, 142, 51, 0.8), 
        0 0 25px rgba(209, 173, 12, 0.8);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Mind + Order (Blue → Gold) */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(45, 113, 162, 1), rgba(209, 173, 12, 1));
    box-shadow: 
        0 0 25px rgba(45, 113, 162, 0.8), 
        0 0 25px rgba(209, 173, 12, 0.8);
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Body + Chaos (Orange → Purple) */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(230, 116, 17, 1), rgba(68, 46, 109, 1));
    box-shadow: 
        0 0 25px rgba(230, 116, 17, 0.8), 
        0 0 25px rgba(68, 46, 109, 0.8);
}

#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Body + Order (Orange → Gold) */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion {
    border: none;
    padding: 5px;
    background: linear-gradient(135deg, rgba(230, 116, 17, 1), rgba(209, 173, 12, 1));
    box-shadow: 
        0 0 25px rgba(230, 116, 17, 0.8), 
        0 0 25px rgba(209, 173, 12, 0.8);
}

#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion::after,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion > *,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion > * {
    position: relative;
    z-index: 1;
}

/* Hover effects for dual-color champion cards */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(68, 46, 109, 1),
        0 0 35px rgba(216, 31, 31, 0.9), 
        0 0 35px rgba(68, 46, 109, 0.9), 
        inset 0 0 40px rgba(216, 31, 31, 0.4);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(79, 142, 51, 1),
        0 0 35px rgba(216, 31, 31, 0.9), 
        0 0 35px rgba(79, 142, 51, 0.9), 
        inset 0 0 40px rgba(216, 31, 31, 0.4);
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(230, 116, 17, 1),
        0 0 35px rgba(45, 113, 162, 0.9), 
        0 0 35px rgba(230, 116, 17, 0.9), 
        inset 0 0 40px rgba(45, 113, 162, 0.4);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(45, 113, 162, 1),
        0 0 35px rgba(79, 142, 51, 0.9), 
        0 0 35px rgba(45, 113, 162, 0.9), 
        inset 0 0 40px rgba(79, 142, 51, 0.4);
}

#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(68, 46, 109, 1),
        0 0 35px rgba(209, 173, 12, 0.9), 
        0 0 35px rgba(68, 46, 109, 0.9), 
        inset 0 0 40px rgba(209, 173, 12, 0.4);
}

/* Mind + Chaos hover effect */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(68, 46, 109, 1),
        0 0 35px rgba(45, 113, 162, 0.9), 
        0 0 35px rgba(68, 46, 109, 0.9), 
        inset 0 0 40px rgba(45, 113, 162, 0.4);
}

/* Fury + Mind hover effect */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(45, 113, 162, 1),
        0 0 35px rgba(216, 31, 31, 0.9), 
        0 0 35px rgba(45, 113, 162, 0.9), 
        inset 0 0 40px rgba(216, 31, 31, 0.4);
}

/* Fury + Body hover effect */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(230, 116, 17, 1),
        0 0 35px rgba(216, 31, 31, 0.9), 
        0 0 35px rgba(230, 116, 17, 0.9), 
        inset 0 0 40px rgba(216, 31, 31, 0.4);
}

/* Fury + Order hover effect */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="fury"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(209, 173, 12, 1),
        0 0 35px rgba(216, 31, 31, 0.9), 
        0 0 35px rgba(209, 173, 12, 0.9), 
        inset 0 0 40px rgba(216, 31, 31, 0.4);
}

/* Calm + Body hover effect */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(230, 116, 17, 1),
        0 0 35px rgba(79, 142, 51, 0.9), 
        0 0 35px rgba(230, 116, 17, 0.9), 
        inset 0 0 40px rgba(79, 142, 51, 0.4);
}

/* Calm + Chaos hover effect */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(68, 46, 109, 1),
        0 0 35px rgba(79, 142, 51, 0.9), 
        0 0 35px rgba(68, 46, 109, 0.9), 
        inset 0 0 40px rgba(79, 142, 51, 0.4);
}

/* Calm + Order hover effect */
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="calm"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(209, 173, 12, 1),
        0 0 35px rgba(79, 142, 51, 0.9), 
        0 0 35px rgba(209, 173, 12, 0.9), 
        inset 0 0 40px rgba(79, 142, 51, 0.4);
}

/* Mind + Order hover effect */
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="mind"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(209, 173, 12, 1),
        0 0 35px rgba(45, 113, 162, 0.9), 
        0 0 35px rgba(209, 173, 12, 0.9), 
        inset 0 0 40px rgba(45, 113, 162, 0.4);
}

/* Body + Chaos hover effect */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="chaos"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(68, 46, 109, 1),
        0 0 35px rgba(230, 116, 17, 0.9), 
        0 0 35px rgba(68, 46, 109, 0.9), 
        inset 0 0 40px rgba(230, 116, 17, 0.4);
}

/* Body + Order hover effect */
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="order"] .deck-breakdown-card.champion:hover,
#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="body"] .deck-breakdown-card.champion:hover {
    box-shadow: 
        0 0 0 2px rgba(209, 173, 12, 1),
        0 0 35px rgba(230, 116, 17, 0.9), 
        0 0 35px rgba(209, 173, 12, 0.9), 
        inset 0 0 40px rgba(230, 116, 17, 0.4);
}

/* Theme-based hover colors for all cards */
/* Fury Theme */
#deck-breakdown-widget[data-rune-theme="fury"] .deck-breakdown-card:hover {
    border-color: rgba(216, 31, 31, 0.8);
    box-shadow: 0 8px 20px rgba(216, 31, 31, 0.4);
}

/* Calm Theme */
#deck-breakdown-widget[data-rune-theme="calm"] .deck-breakdown-card:hover {
    border-color: rgba(79, 142, 51, 0.8);
    box-shadow: 0 8px 20px rgba(79, 142, 51, 0.4);
}

/* Mind Theme */
#deck-breakdown-widget[data-rune-theme="mind"] .deck-breakdown-card:hover {
    border-color: rgba(45, 113, 162, 0.8);
    box-shadow: 0 8px 20px rgba(45, 113, 162, 0.4);
}

/* Body Theme */
#deck-breakdown-widget[data-rune-theme="body"] .deck-breakdown-card:hover {
    border-color: rgba(230, 116, 17, 0.8);
    box-shadow: 0 8px 20px rgba(230, 116, 17, 0.4);
}

/* Chaos Theme */
#deck-breakdown-widget[data-rune-theme="chaos"] .deck-breakdown-card:hover {
    border-color: rgba(68, 46, 109, 0.8);
    box-shadow: 0 8px 20px rgba(68, 46, 109, 0.4);
}

/* Order Theme */
#deck-breakdown-widget[data-rune-theme="order"] .deck-breakdown-card:hover {
    border-color: rgba(209, 173, 12, 0.8);
    box-shadow: 0 8px 20px rgba(209, 173, 12, 0.4);
}

/* Dual-color hover effects (use primary theme, but can be enhanced) */
#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="chaos"] .deck-breakdown-card:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="fury"] .deck-breakdown-card:hover {
    border-color: rgba(216, 31, 31, 0.8);
    box-shadow: 0 8px 20px rgba(216, 31, 31, 0.4), 0 8px 20px rgba(68, 46, 109, 0.3);
}

#deck-breakdown-widget[data-rune-theme="fury"][data-rune-theme-secondary="calm"] .deck-breakdown-card:hover,
#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="fury"] .deck-breakdown-card:hover {
    border-color: rgba(216, 31, 31, 0.8);
    box-shadow: 0 8px 20px rgba(216, 31, 31, 0.4), 0 8px 20px rgba(79, 142, 51, 0.3);
}

#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="body"] .deck-breakdown-card:hover,
#deck-breakdown-widget[data-rune-theme="body"][data-rune-theme-secondary="mind"] .deck-breakdown-card:hover {
    border-color: rgba(45, 113, 162, 0.8);
    box-shadow: 0 8px 20px rgba(45, 113, 162, 0.4), 0 8px 20px rgba(230, 116, 17, 0.3);
}

#deck-breakdown-widget[data-rune-theme="calm"][data-rune-theme-secondary="mind"] .deck-breakdown-card:hover,
#deck-breakdown-widget[data-rune-theme="mind"][data-rune-theme-secondary="calm"] .deck-breakdown-card:hover {
    border-color: rgba(79, 142, 51, 0.8);
    box-shadow: 0 8px 20px rgba(79, 142, 51, 0.4), 0 8px 20px rgba(45, 113, 162, 0.3);
}

#deck-breakdown-widget[data-rune-theme="order"][data-rune-theme-secondary="chaos"] .deck-breakdown-card:hover,
#deck-breakdown-widget[data-rune-theme="chaos"][data-rune-theme-secondary="order"] .deck-breakdown-card:hover {
    border-color: rgba(209, 173, 12, 0.8);
    box-shadow: 0 8px 20px rgba(209, 173, 12, 0.4), 0 8px 20px rgba(68, 46, 109, 0.3);
}

/* Signature Cards - No Special Highlighting */
/* Signature cards blend in with regular cards, sorted by position only */

.deck-breakdown-card:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(0, 179, 55, 0.6);
    box-shadow: 0 8px 20px rgba(0, 179, 55, 0.3);
    box-shadow: 0 8px 20px rgba(156, 163, 175, 0.3);
    z-index: 100;
}

/* Dynamic Card Hover based on Domain Theme */
.deck-breakdown-perfect[data-rune-theme="fury"] .deck-breakdown-card:hover {
    border-color: rgba(216, 31, 31, 0.8);
    box-shadow: 0 8px 20px rgba(216, 31, 31, 0.4);
}

.deck-breakdown-perfect[data-rune-theme="calm"] .deck-breakdown-card:hover {
    border-color: rgba(79, 142, 51, 0.8);
    box-shadow: 0 8px 20px rgba(79, 142, 51, 0.4);
}

.deck-breakdown-perfect[data-rune-theme="mind"] .deck-breakdown-card:hover {
    border-color: rgba(45, 113, 162, 0.8);
    box-shadow: 0 8px 20px rgba(45, 113, 162, 0.4);
}

.deck-breakdown-perfect[data-rune-theme="body"] .deck-breakdown-card:hover {
    border-color: rgba(230, 116, 17, 0.8);
    box-shadow: 0 8px 20px rgba(230, 116, 17, 0.4);
}

.deck-breakdown-perfect[data-rune-theme="chaos"] .deck-breakdown-card:hover {
    border-color: rgba(68, 46, 109, 0.8);
    box-shadow: 0 8px 20px rgba(68, 46, 109, 0.4);
}

.deck-breakdown-perfect[data-rune-theme="order"] .deck-breakdown-card:hover {
    border-color: rgba(209, 173, 12, 0.8);
    box-shadow: 0 8px 20px rgba(209, 173, 12, 0.4);
}

.deck-breakdown-card:active {
    transform: translateY(-2px) scale(1.02);
}

.deck-breakdown-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.deck-breakdown-card-price {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.85);
    color: #00B337;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    text-align: left;
    z-index: 100;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure price is visible on champion cards - override any conflicting rules */
.deck-breakdown-card.champion .deck-breakdown-card-price {
    z-index: 100 !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override the child z-index rule for price elements specifically */
.deck-breakdown-card.champion > .deck-breakdown-card-price {
    z-index: 100 !important;
}

.deck-breakdown-card-count {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    border: 1px solid rgba(0, 179, 55, 0.5);
}

/* Legend Card - Compact */
.deck-breakdown-legend-single .deck-breakdown-card {
    max-width: 120px;
    min-height: 140px;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 1400px) {
    .deck-breakdown-main-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .deck-breakdown-top {
        grid-template-columns: 160px 1fr;
    }
}

@media (max-width: 1024px) {
    .deck-breakdown-main-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .deck-breakdown-top {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    
    .deck-breakdown-legend-box,
    .deck-breakdown-sideboard-box {
        max-width: 100%;
    }
    
    .deck-breakdown-sideboard-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    
    .deck-breakdown-battlefields-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .deck-breakdown-battlefields-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .deck-breakdown-main-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .deck-breakdown-perfect {
        padding: 0.5rem;
        border-width: 2px;
    }
    
    .deck-breakdown-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.5rem 0;
        border-bottom-width: 2px;
    }
    
    .deck-breakdown-branding {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }
    
    .deck-breakdown-logo {
        height: 35px;
        min-height: 35px;
    }
    
    .deck-breakdown-title {
        font-size: 1.1rem;
    }
    
    #deck-attribution {
        font-size: 0.6rem;
    }
    
    .deck-breakdown-right {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .deck-breakdown-cost {
        text-align: left;
    }
    
    .deck-cost-value {
        font-size: 1rem;
    }
    
    .deck-breakdown-body {
        gap: 0.5rem;
    }
    
    .deck-breakdown-top {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .deck-breakdown-main {
        padding: 0.4rem;
    }
    
    .deck-breakdown-legend-box {
        padding: 0.4rem;
    }
    
    .deck-breakdown-legend-single {
        min-height: 100px;
    }
    
    .deck-breakdown-battlefields-box,
    .deck-breakdown-runes-box {
        padding: 0.4rem;
    }
    
    .section-title {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }
    
    /* Deck Breakdown Card Modal - Mobile Optimization */
    #deck-breakdown-card-modal {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 1rem;
    }
    
    #deck-breakdown-card-modal > div {
        padding: 1rem !important;
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        margin: 0.5rem !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Override inline flex layout to stack vertically on mobile */
    #deck-breakdown-card-modal > div > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    /* Image container - make it fit within viewport */
    #deck-breakdown-card-modal > div > div > div:first-child {
        flex-shrink: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Card image - responsive sizing */
    #deck-breakdown-card-modal img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        max-height: 40vh !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Info container - full width, stacked */
    #deck-breakdown-card-modal > div > div > div:last-child {
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        color: #fff !important;
    }
    
    /* Card name/title - smaller on mobile */
    #deck-breakdown-card-modal h3 {
        font-size: 1.4rem !important;
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }
    
    /* Details container - stack vertically */
    #deck-breakdown-card-modal > div > div > div:last-child > div {
        margin-bottom: 1rem !important;
    }
    
    /* Price section */
    #deck-breakdown-card-modal > div > div > div:last-child > div > div:first-child {
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    #deck-breakdown-card-modal > div > div > div:last-child > div > div:first-child strong {
        font-size: 0.85rem !important;
    }
    
    #deck-breakdown-card-modal > div > div > div:last-child > div > div:first-child span {
        font-size: 1.25rem !important;
        display: block !important;
        margin-left: 0 !important;
        margin-top: 0.25rem !important;
    }
    
    /* All detail rows - stack and center */
    #deck-breakdown-card-modal > div > div > div:last-child > div > div {
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    #deck-breakdown-card-modal > div > div > div:last-child > div > div strong {
        font-size: 0.8rem !important;
        color: #9a9a9a !important;
    }
    
    #deck-breakdown-card-modal > div > div > div:last-child > div > div span {
        font-size: 0.9rem !important;
        margin-left: 0 !important;
        color: #fff !important;
    }
    
    /* Extended properties and flavor text */
    #deck-breakdown-card-modal > div > div > div:last-child > div > div[style*="Extended Properties"],
    #deck-breakdown-card-modal > div > div > div:last-child > div > div[style*="Flavor Text"] {
        font-size: 0.85rem !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Purchase button - full width */
    #deck-breakdown-card-modal a,
    #deck-breakdown-card-modal button[style*="Buy"] {
        width: 100% !important;
        margin-top: 1rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Close button - ensure it's visible */
    #deck-breakdown-card-modal button[style*="×"],
    #deck-breakdown-card-modal button:first-child {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        z-index: 10002 !important;
    }
    
    .deck-breakdown-sideboard-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   Comprehensive mobile optimization section
   ============================================ */

@media (max-width: 768px) {
    /* Article Container & Spacing */
    .article-container {
        padding: 1rem;
        max-width: 100%;
    }
    
    .article-text {
        padding: 0;
    }
    
    /* Typography - Mobile Optimized */
    .article-title {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    .article-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    
    .article-section h3 {
        font-size: 1.25rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    .article-section p {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 0.875rem;
    }
    
    /* Article Header */
    .article-header {
        margin-bottom: 1.5rem;
    }
    
    /* Article Meta */
    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    /* Article Intro */
    .article-intro {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }
    
    /* Visual Anchor */
    .visual-anchor {
        margin: 1.5rem 0;
        padding: 0.75rem;
    }
    
    .visual-anchor h2 {
        font-size: 1.35rem;
        margin-bottom: 0.75rem;
    }
    
    .visual-anchor p {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    /* Featured Cards in Visual Anchor - 5 in a row on mobile */
    .visual-anchor #featured-cards-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.3rem;
        margin-top: 0.75rem;
    }
    
    .visual-anchor .card-item {
        aspect-ratio: 5 / 7;
        border-radius: 6px;
    }
    
    .visual-anchor .card-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 6px;
    }
    
    .visual-anchor .card-price {
        font-size: 0.55rem;
        padding: 0.1rem 0.25rem;
        bottom: 2px;
        left: 2px;
    }
    
    /* Widgets Grid Container */
    .widgets-grid-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
    }
    
    /* Unified Widgets */
    .unified-widget {
        padding: 1rem;
        border-radius: 8px;
    }
    
    .unified-widget-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .unified-widget-title-group {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .unified-widget-title {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .unified-widget-subtitle {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
    
    .unified-widget-action-btn {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Toggle Buttons */
    .decklist-toggle-btn {
        min-width: 40px;
        min-height: 36px;
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Charts */
    .chart-wrapper {
        min-height: 250px;
        padding: 0.5rem;
    }
    
    .charts-grid-dual {
        gap: 1.5rem;
    }
    
    .charts-grid-dual .chart-wrapper {
        min-height: 250px;
    }
    
    /* Chart Legends - Stack on mobile */
    .chart-wrapper canvas {
        max-width: 100%;
    }
    
    /* Deck Breakdown Widget */
    #deck-breakdown-widget {
        padding: 0.5rem;
        margin: 0.75rem 0;
    }
    
    #deck-breakdown-widget h3 {
        font-size: 1.25rem;
        padding: 0.75rem 1rem;
    }
    
    /* Key Cards Section */
    .key-card {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    .key-card-image {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .key-card-content {
        width: 100%;
    }
    
    .key-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .key-card-actions {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .key-card-buy-button {
        width: 100%;
    }
    
    /* Featured Cards Grid (for other sections, not visual anchor) */
    #featured-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* Pros & Cons */
    .pros-cons,
    .pros-cons-enhanced {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .strength-item,
    .weakness-item {
        flex-direction: column;
        padding: 1rem;
    }
    
    .strength-icon,
    .weakness-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        margin: 0 auto 0.5rem;
    }
    
    /* Deck Ratings Widget */
    .deck-ratings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Format Legality Badges */
    .format-legality-badges {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .format-badge {
        padding: 0.75rem;
    }
    
    /* Mulligan Guide */
    .mulligan-columns {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .mulligan-column {
        width: 100%;
    }
    
    /* Sideboard Guide */
    .sideboard-type-section {
        margin-bottom: 2rem;
    }
    
    .sideboard-type-header {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    
    .sideboard-matchup {
        margin-bottom: 1rem;
    }
    
    .matchup-header {
        padding: 0.75rem;
    }
    
    .matchup-content {
        padding: 0.75rem;
    }
    
    .sideboard-in,
    .sideboard-out {
        margin-bottom: 1rem;
    }
    
    /* Budget Breakdown */
    .budget-rarity-section {
        margin-bottom: 1.5rem;
    }
    
    .budget-item {
        padding: 0.75rem;
    }
    
    .budget-summary {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        text-align: center;
    }
    
    /* YouTube Video */
    .youtube-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }
    
    .youtube-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    
    /* Section Spacing */
    .article-section {
        margin: 2rem 0;
        padding: 0;
    }
    
    #card-type-chart-section {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Widget Container */
    .widget-container {
        padding: 1rem;
    }
    
    /* Decklist Widget */
    .decklist-content,
    .decklist-collapsible-content {
        padding: 0.75rem;
    }
    
    /* Price Table */
    .price-table {
        font-size: 0.85rem;
    }
    
    .price-table th,
    .price-table td {
        padding: 0.5rem 0.25rem;
    }
    
    /* Price Movers */
    .price-movers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Related Articles */
    .related-articles {
        padding: 1rem;
    }
    
    .related-articles h3 {
        font-size: 1.25rem;
    }
    
    .related-articles a {
        font-size: 1rem;
    }
    
    /* Matchups Grid */
    .matchups-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Game Plan Section */
    .game-plan-section {
        padding: 1rem 0;
    }
    
    /* Final Thoughts */
    .final-thoughts-section {
        padding: 1rem 0;
    }
    
    /* Variants Section */
    .variants-section {
        padding: 1rem 0;
    }
    
    /* Budget Section */
    .budget-section {
        padding: 1rem 0;
    }
    
    /* Data Section */
    .data-section {
        padding: 1rem 0;
    }
    
    /* CTA Buttons */
    .cta-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cta-button {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
    
    /* Piechart Branding - Smaller and properly positioned on mobile */
    .piechart-branding-corner.piechart-branding-bottom-left {
        bottom: 0.5rem;
        left: 0.5rem;
    }
    
    .piechart-branding-logo-corner {
        height: 35px;
        width: auto;
    }
    
    .piechart-branding-text-corner {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .article-container {
        padding: 0.75rem;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .article-section h2 {
        font-size: 1.35rem;
    }
    
    .article-section h3 {
        font-size: 1.15rem;
    }
    
    .unified-widget {
        padding: 0.75rem;
    }
    
    .unified-widget-title {
        font-size: 1rem;
    }
    
    .unified-widget-subtitle {
        font-size: 0.8rem;
    }
    
    #featured-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .chart-wrapper {
        min-height: 200px;
    }
    
    .charts-grid-dual .chart-wrapper {
        min-height: 200px;
    }
    
    .key-card {
        padding: 0.75rem;
    }
    
    .decklist-toggle-btn {
        min-width: 36px;
        min-height: 32px;
        padding: 0.4rem;
    }
    
    .unified-widget-action-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .format-badge {
        padding: 0.5rem;
    }
    
    .budget-item {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Piechart Branding - Smaller and properly positioned on mobile */
    .piechart-branding-corner.piechart-branding-bottom-left {
        bottom: 0.5rem;
        left: 0.5rem;
    }
    
    .piechart-branding-logo-corner {
        height: 35px;
        width: auto;
    }
    
    .piechart-branding-text-corner {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
    
    /* Domain Distribution Chart - More space for pie chart on mobile */
    .piechart-domain-wrapper {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .piechart-domain-wrapper .piechart-container {
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 auto;
        min-width: 0;
    }
    
    /* Make the pie chart container larger on mobile */
    .piechart-domain-wrapper .piechart-container.piechart-domain-container {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1;
    }
    
    /* Make sidebar smaller to accommodate larger chart */
    .piechart-domain-wrapper .piechart-stats-sidebar {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .piechart-domain-sidebar {
        font-size: 0.85rem;
    }
    
    .piechart-domain-legend {
        font-size: 0.8rem;
    }
    
    /* Ensure piechart content wrapper doesn't constrain */
    .piechart-content-wrapper.piechart-domain-wrapper {
        margin: 1rem 0;
        gap: 1rem;
    }
    
    /* Deck Breakdown Perfect Widget - Mobile Optimization */
    .deck-breakdown-perfect {
        padding: 0.5rem;
        border-width: 2px;
    }
    
    .deck-breakdown-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.5rem 0;
        border-bottom-width: 2px;
    }
    
    .deck-breakdown-branding {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }
    
    .deck-breakdown-logo {
        height: 35px;
        min-height: 35px;
    }
    
    .deck-breakdown-title {
        font-size: 1.1rem;
    }
    
    #deck-attribution {
        font-size: 0.6rem;
    }
    
    .deck-breakdown-right {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .deck-breakdown-cost {
        text-align: left;
    }
    
    .deck-cost-value {
        font-size: 1rem;
    }
    
    .deck-breakdown-body {
        gap: 0.5rem;
    }
    
    .deck-breakdown-top {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .deck-breakdown-main-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.25rem;
    }
    
    .deck-breakdown-main {
        padding: 0.4rem;
    }
    
    .deck-breakdown-legend-box {
        padding: 0.4rem;
    }
    
    .deck-breakdown-legend-single {
        min-height: 100px;
    }
    
    .deck-breakdown-battlefields-box,
    .deck-breakdown-runes-box {
        padding: 0.4rem;
    }
    
    .section-title {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }
    
    /* Deck Breakdown Card Modal - Mobile Optimization */
    #deck-breakdown-card-modal {
        padding: 0.5rem;
    }
    
    #deck-breakdown-card-modal > div {
        padding: 1rem !important;
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        margin: 0.5rem !important;
    }
    
    /* Ensure modal content is scrollable on mobile */
    #deck-breakdown-card-modal > div {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
    }
    
    /* Override inline flex layout to stack vertically on mobile */
    #deck-breakdown-card-modal > div > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Image container - make it fit within viewport */
    #deck-breakdown-card-modal > div > div > div[style*="flex-shrink: 0"] {
        flex-shrink: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Card image - responsive sizing */
    #deck-breakdown-card-modal img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 35vh !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Info container - full width, stacked */
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        color: #fff !important;
        text-align: center !important;
    }
    
    /* Card name/title - smaller on mobile */
    #deck-breakdown-card-modal h3 {
        font-size: 1.3rem !important;
        margin: 0 0 0.75rem 0 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        width: 100% !important;
    }
    
    /* Details container - stack vertically */
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div {
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Price section - center and stack */
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div:first-child {
        margin-bottom: 0.75rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div:first-child strong {
        font-size: 0.85rem !important;
    }
    
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div:first-child span {
        font-size: 1.2rem !important;
        display: block !important;
        margin-left: 0 !important;
        margin-top: 0.25rem !important;
    }
    
    /* All detail rows - stack and center */
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div {
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
    }
    
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div strong {
        font-size: 0.8rem !important;
        color: #9a9a9a !important;
    }
    
    #deck-breakdown-card-modal > div > div > div[style*="flex: 1"] > div > div span {
        font-size: 0.9rem !important;
        margin-left: 0 !important;
        color: #fff !important;
    }
    
    /* Purchase button - full width */
    #deck-breakdown-card-modal a[href*="tcgplayer"],
    #deck-breakdown-card-modal a[style*="Buy"],
    #deck-breakdown-card-modal button[style*="Buy"] {
        width: 100% !important;
        margin-top: 1rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Close button - ensure it's visible and positioned correctly */
    #deck-breakdown-card-modal button[style*="×"],
    #deck-breakdown-card-modal > div > button {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        z-index: 10002 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}