html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: visible;
    font-family: 'Poppins', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    background: #1a1a1a;
}

/* Site Header with Logo and Breadcrumbs */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-bottom: 2px solid rgba(0, 179, 55, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.logo-link:hover {
    transform: scale(1.05);
}

.site-logo {
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.breadcrumb-item:hover {
    color: #00b337;
}

.breadcrumb-item.breadcrumb-current {
    color: #00b337;
    font-weight: 600;
    cursor: default;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    user-select: none;
}

.app-container {
    width: 100%;
    height: calc(100vh - 60px);
    margin-top: 60px;
    display: flex;
    background: #1a1a1a;
}

.left-side {
    width: calc(100vh * 0.728);
    border-right: 1px solid #ccc;
    padding: 0;
    overflow-y: hidden;
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, #313131, #131313);
    overflow-x: hidden;
}

.right-side {
    width: calc(100% - (100vh * 0.728));
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    background: #1a1a1a;
}

.header {
    padding: 10px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
}

.search-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

#searchInput {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #1a1a1a;
    color: white;
    font-size: 14px;
}

#searchInput:focus {
    outline: none;
    border-color: #777;
}

.help-button {
    background: rgba(0, 179, 55, 0.2);
    color: #00b337;
    border: 1px solid rgba(0, 179, 55, 0.4);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.help-button:hover {
    background: rgba(0, 179, 55, 0.3);
    border-color: rgba(0, 179, 55, 0.6);
    transform: scale(1.05);
}

.help-button:active {
    transform: scale(0.95);
}

.search-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
    color: white;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.3);
    z-index: 1000;
    width: 380px;
    max-width: calc(100vw - 20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 179, 55, 0.1);
    display: none;
    animation: slideDown 0.2s ease-out;
}

/* Mobile adjustments for tooltip */
@media (max-width: 768px) {
    .search-help-tooltip {
        width: calc(100vw - 40px);
        right: 10px;
        left: auto;
    }
}

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

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 179, 55, 0.2);
    background: rgba(0, 179, 55, 0.05);
}

.tooltip-header h4 {
    margin: 0;
    color: #00b337;
    font-size: 16px;
    font-weight: 600;
}

.tooltip-close {
    background: transparent;
    border: none;
    color: #999;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tooltip-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tooltip-content {
    padding: 16px;
}

.search-tip {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-tip:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.search-tip strong {
    color: #00b337;
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.search-tip code {
    background: rgba(0, 179, 55, 0.15);
    color: #00ff55;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid rgba(0, 179, 55, 0.3);
}

.search-tip em {
    color: #aaa;
    font-size: 12px;
    font-style: italic;
    display: block;
    margin-top: 4px;
}

/* Search suggestions */
.search-wrapper {
    position: relative;
    flex: 1;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.search-suggestion-header {
    padding: 8px 12px;
    background: #1a1a1a;
    color: #888;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #444;
}

.search-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid #333;
    transition: background 0.2s;
}

.search-suggestion-item:hover {
    background: #3a3a3a;
}

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

/* Filter controls */
.filter-controls {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    justify-content: flex-end;
}

.filter-select-all,
.filter-clear-all {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-select-all {
    background: rgba(0, 179, 55, 0.7);
}

.filter-select-all:hover {
    background: rgba(0, 179, 55, 0.9);
}

.filter-clear-all {
    background: rgba(255, 107, 107, 0.7);
}

.filter-clear-all:hover {
    background: rgba(255, 107, 107, 0.9);
}

/* View toggle */
.view-toggle-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.view-toggle-btn {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.view-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: #777;
}

.view-toggle-btn.active {
    background: rgba(0, 179, 55, 0.3);
    border-color: rgba(0, 179, 55, 0.5);
}

/* Filter presets */
.filter-presets-container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px;
    background: rgba(20, 20, 20, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.preset-btn {
    padding: 6px 12px;
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.preset-btn:hover {
    background: rgba(0, 179, 55, 0.2);
    border-color: rgba(0, 179, 55, 0.4);
}

/* Range sliders */
.range-slider {
    width: 100px;
    margin: 0 8px;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-inputs input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    background: #1a1a1a;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
}

/* List view removed - only grid view is supported */

/* Sort dropdown styling */
.sort-select {
    padding: 10px 12px;
    padding-right: 32px;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #2a2a2a !important;
}

.sort-select::-ms-expand {
    display: none;
}

.sort-select option {
    background: #2a2a2a !important;
    color: #ffffff !important;
    padding: 8px;
}

.sort-select:not([multiple]) {
    color: #ffffff !important;
}

.sort-select:focus {
    outline: none;
    border-color: #00b337;
    background-color: #2a2a2a !important;
    box-shadow: 0 0 0 3px rgba(0, 179, 55, 0.1);
    color: #ffffff !important;
}

.sort-select:hover {
    border-color: rgba(0, 179, 55, 0.4);
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Ensure selected value text is visible */
.sort-select,
.sort-select * {
    color: #ffffff !important;
}

/* Advanced filters panel styling */
.advanced-filters {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #444;
}

.advanced-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.filter-group {
    flex: 1;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 12px;
    font-weight: 500;
}

/* Variant button styling */
.card-variant-button {
    padding: 4px 8px;
    background: rgba(0, 179, 55, 0.3);
    color: white;
    border: 1px solid rgba(0, 179, 55, 0.5);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.card-variant-button:hover {
    background: rgba(0, 179, 55, 0.5);
}

/* Bulk selection checkbox */
.bulk-select-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    z-index: 10;
    cursor: pointer;
    accent-color: #00b337;
}

.deck-card {
    position: relative;
}

/* Card note button */
.card-note-button {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.5);
    color: #ffc107;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.card-note-button:hover {
    background: rgba(255, 193, 7, 0.4);
    border-color: #ffc107;
}

.card-note-button:active {
    transform: scale(0.95);
}

/* Drag and drop styling */
.deck-card[draggable="true"] {
    cursor: move;
}

.deck-card.dragging {
    opacity: 0.5;
}

/* Section selector - compact, positioned top-left corner */
.card-section-select {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(0, 179, 55, 0.5);
    color: white;
    padding: 4px 8px;
    padding-right: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='white' d='M5 7.5L1.5 4h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 10px;
    min-width: 70px;
    max-width: 80px;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card:hover .card-section-select {
    opacity: 1;
    pointer-events: all;
}

.card-section-select:hover {
    background: rgba(0, 179, 55, 0.85);
    border-color: rgba(0, 179, 55, 0.8);
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.4);
}

.card-section-select:focus {
    outline: none;
    background: rgba(0, 179, 55, 0.9);
    border-color: rgba(0, 179, 55, 1);
    box-shadow: 0 0 0 2px rgba(0, 179, 55, 0.3);
}

/* Deck section headers */
.deck-section-header {
    grid-column: 1 / -1;
    padding: 6px 10px;
    margin-top: 10px;
    border-bottom: 2px solid #00b337;
    background: rgba(0, 179, 55, 0.1);
    border-radius: 4px 4px 0 0;
    cursor: move;
    transition: all 0.2s ease;
}

.deck-section-header:hover {
    background: rgba(0, 179, 55, 0.15);
    border-bottom-color: #00ff44;
}

.deck-section-header:first-child {
    margin-top: 0;
}

.deck-section-header h3 {
    margin: 0;
    color: #00b337;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deck-section-header .section-name {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    min-width: 100px;
    outline: none;
}

.deck-section-header .section-name:hover {
    background: rgba(255, 255, 255, 0.05);
}

.deck-section-header .section-name:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #00b337;
}

.deck-section-header .section-count {
    font-size: 11px;
    opacity: 0.7;
    font-weight: normal;
}

.deck-section-header .section-drag-hint {
    font-size: 10px;
    opacity: 0.5;
    font-weight: normal;
    margin-left: auto;
}

.deck-section-header .section-delete-btn {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.5);
    color: #ff6b6b;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
    margin-left: auto;
}

.deck-section-header .section-delete-btn:hover {
    background: rgba(255, 107, 107, 0.4);
    border-color: #ff6b6b;
}

.deck-section-header .section-collapse-btn {
    background: rgba(0, 179, 55, 0.2);
    border: 1px solid rgba(0, 179, 55, 0.5);
    color: #00b337;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 24px;
    text-align: center;
}

.deck-section-header .section-collapse-btn:hover {
    background: rgba(0, 179, 55, 0.4);
    border-color: #00b337;
}

.section-cards-container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    min-height: 50px; /* Ensure container has height to receive drop events */
    padding: 25px;
}

.section-cards-container[style*="display: none"] {
    display: none !important;
}

/* Simple drag over indicators - clean and minimal */
.deck-card.drag-over-left {
    border-left: 3px solid #00b337 !important;
    box-shadow: -4px 0 8px rgba(0, 179, 55, 0.5);
}

.deck-card.drag-over-right {
    border-right: 3px solid #00b337 !important;
    box-shadow: 4px 0 8px rgba(0, 179, 55, 0.5);
}


/* Drag and drop tooltip */
.drag-drop-tooltip {
    position: fixed;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.95) 0%, rgba(0, 217, 68, 0.95) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 179, 55, 0.5);
    pointer-events: none;
    z-index: 10000;
    transform: translateX(-50%) translateY(-100%);
    animation: tooltipFadeIn 0.2s ease;
}

.drag-drop-tooltip[data-section-move="true"] {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.95) 0%, rgba(106, 13, 173, 0.95) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 43, 226, 0.5);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-100%) scale(1);
    }
}

/* Search fields indicator */
.search-fields-indicator {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 4px 0;
    z-index: 999;
}

.search-field-badge {
    padding: 2px 6px;
    background: rgba(0, 179, 55, 0.3);
    color: white;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

/* Deck description */
.deck-description {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
}

.deck-description:focus {
    outline: none;
    border-color: #00b337;
}

/* Inline editing */
#deck-title[contenteditable="true"],
#deck-creator[contenteditable="true"] {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.2s;
}

#deck-title[contenteditable="true"]:hover,
#deck-creator[contenteditable="true"]:hover {
    background: rgba(255, 255, 255, 0.05);
}

#deck-title[contenteditable="true"]:focus,
#deck-creator[contenteditable="true"]:focus {
    background: rgba(255, 255, 255, 0.1);
    outline: 1px solid #00b337;
}

/* Card highlighting for issues */
/* Border highlight removed - star icon is sufficient */

/* Champion Unit Toggle Button */
.champion-unit-toggle-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 215, 0, 0.7);
    color: #ffd700;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    z-index: 20;
    opacity: 1; /* Always visible for accessibility */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    line-height: 1;
    pointer-events: auto;
}

.champion-unit-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.95);
    border-color: #ffd700;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 215, 0, 0.7);
}

.champion-unit-toggle-btn.active {
    background: rgba(255, 215, 0, 0.95);
    color: #000;
    border-color: #ffd700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.9);
    font-weight: bold;
}

.champion-unit-toggle-btn.active:hover {
    background: rgba(255, 215, 0, 1);
    transform: scale(1.15);
}

.champion-unit-toggle-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(0, 0, 0, 0.5);
}

.champion-unit-toggle-btn.disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Optimized button on mobile - compact and less bulky */
@media (max-width: 768px) {
    .champion-unit-toggle-btn {
        min-width: 22px;
        min-height: 22px;
        font-size: 12px;
        padding: 2px;
        top: 2px;
        left: 2px;
        border-width: 1px;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 4px rgba(255, 215, 0, 0.3);
        backdrop-filter: blur(4px);
    }
    
    .champion-unit-toggle-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(255, 215, 0, 0.5);
    }
    
    .champion-unit-toggle-btn.active {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 215, 0, 0.6);
    }
    
    .champion-unit-toggle-btn.active:hover {
        transform: scale(1.06);
    }
    
    /* Ensure it doesn't overlap with card count badge on mobile */
    .right-side .deck-card .champion-unit-toggle-btn {
        z-index: 25; /* Higher than card-count (usually z-index: 20) */
    }
}

.deck-card.card-has-issue {
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    animation: issue-pulse 2s ease-in-out infinite;
}

@keyframes issue-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
    }
}

/* Filter animation */
.filter-container {
    transition: all 0.3s ease;
}

.filter-select-wrapper {
    transition: transform 0.2s ease;
}

.filter-select-wrapper:hover {
    transform: translateY(-2px);
}

.filter-chip {
    animation: chip-appear 0.3s ease;
}

@keyframes chip-appear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Secondary sort dropdown */
.sort-select-secondary {
    padding: 6px 10px;
    background: #1a1a1a;
    color: #888;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.sort-select-secondary:focus {
    outline: none;
    border-color: #00b337;
    color: white;
}

.search-help-tooltip h4 {
    margin-top: 0;
}

.search-help-tooltip code {
    background: #1a1a1a;
    padding: 2px 4px;
    border-radius: 3px;
}

button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: #555;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background: #666;
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    position: relative;
}

/* Modern Filter Button */
.filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* Make filter buttons relative containers for dropdowns */

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 179, 55, 0.4);
}

.filter-btn.active {
    background: rgba(0, 179, 55, 0.2);
    border-color: rgba(0, 179, 55, 0.5);
    color: #00d144;
}

.filter-btn-label {
    display: inline-block;
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #00b337;
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
}

/* Filter Dropdown */
.filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 250px;
    max-width: 400px;
    max-height: 400px;
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: visible;
    display: none;
    flex-direction: column;
}

/* Position dropdown relative to wrapper */
.filter-btn-wrapper .filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
}

.filter-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
}

.filter-dropdown-actions {
    display: flex;
    gap: 6px;
}

.filter-select-all-btn,
.filter-clear-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-select-all-btn {
    background: rgba(0, 179, 55, 0.7);
    color: white;
}

.filter-select-all-btn:hover {
    background: rgba(0, 179, 55, 0.9);
}

.filter-clear-btn {
    background: rgba(255, 107, 107, 0.7);
    color: white;
}

.filter-clear-btn:hover {
    background: rgba(255, 107, 107, 0.9);
}

.filter-dropdown-content {
    max-height: 350px;
    overflow-y: auto;
    padding: 8px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.filter-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00b337;
}

.filter-option label {
    flex: 1;
    cursor: pointer;
    font-size: 12px;
    color: #e0e0e0;
    user-select: none;
}

.filter-clear-all-btn {
    padding: 6px 12px;
    background: rgba(255, 107, 107, 0.7);
    border: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 6px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.filter-clear-all-btn:hover {
    background: rgba(255, 107, 107, 0.9);
}

.sort-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sideboard mode button in sort-container */
.sort-container #sideboardModeBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.sort-container #sideboardModeBtn:hover {
    background: linear-gradient(135deg, #333 0%, #222 100%);
    border-color: #555;
    transform: translateY(-1px);
}

.sort-container #sideboardModeBtn.active {
    background: linear-gradient(135deg, #00b337 0%, #008a2a 100%);
    border-color: #00b337;
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.3);
}

.sort-container #sideboardModeBtn.active:hover {
    background: linear-gradient(135deg, #00c944 0%, #009b2f 100%);
    box-shadow: 0 3px 12px rgba(0, 179, 55, 0.4);
}

.sort-container #sideboardModeBtn .btn-icon {
    font-size: 16px;
    line-height: 1;
}

.sort-container #sideboardModeBtn .btn-text {
    font-size: 12px;
    letter-spacing: 0.3px;
}

.bypass-limitations-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bypass-limitations-btn:hover {
    background: linear-gradient(135deg, #333 0%, #222 100%);
    border-color: #555;
    transform: translateY(-1px);
}

.bypass-limitations-btn.active {
    background: linear-gradient(135deg, #00b337 0%, #008a2a 100%);
    border-color: #00b337;
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.3);
}

.bypass-limitations-btn.active:hover {
    background: linear-gradient(135deg, #00c944 0%, #009b2f 100%);
    box-shadow: 0 3px 12px rgba(0, 179, 55, 0.4);
}

.bypass-icon {
    font-size: 16px;
    line-height: 1;
}

.bypass-text {
    font-size: 12px;
    letter-spacing: 0.3px;
}

.sort-container {
    margin-top: 10px;
}

.auto-filter-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.2) 0%, rgba(0, 138, 42, 0.2) 100%);
    border: 1px solid rgba(0, 179, 55, 0.4);
    border-radius: 6px;
    color: #00b337;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.auto-filter-indicator .indicator-icon {
    font-size: 14px;
    line-height: 1;
}

.auto-filter-indicator .indicator-text {
    font-size: 11px;
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    .sort-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sort-container #sideboardModeBtn {
        width: 100%;
        justify-content: center;
    }
    
    .bypass-limitations-btn {
        width: 100%;
        justify-content: center;
    }
    
    .auto-filter-indicator {
        width: 100%;
        justify-content: center;
    }
}

.filter-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #00b337;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 0 5px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #00b337;
    color: white;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 12px;
}

.filter-chip-label {
    font-weight: 500;
}

.filter-chip-remove {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.filter-chip-remove:hover {
    background: rgba(255, 255, 255, 0.3);
}

.filter-container select {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23e0e0e0' d='M5 7.5L1.5 4h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.filter-container select:focus {
    outline: none;
    border-color: rgba(0, 179, 55, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

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

.card-list {
    width: 100%;
    height: calc(100vh - 150px);
    overflow-y: auto;
    position: relative;
    /* Smooth scrolling and prevent flickering */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    /* Prevent repaints during updates */
    contain: layout style;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem;
    /* Prevent flickering during updates */
    contain: layout style paint;
    will-change: contents;
}

.card {
    position: relative;
    aspect-ratio: 5/7;
    transition: transform 0.2s;
    cursor: pointer;
    /* Prevent flickering during updates */
    will-change: transform;
    backface-visibility: hidden;
}

.card:hover {
    transform: scale(1.05);
    z-index: 10;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    /* Reduce transition time to minimize flicker */
    transition: opacity 0.15s ease;
    /* Prevent flickering during updates */
    will-change: opacity;
    backface-visibility: hidden;
}

.card img.image-error {
    opacity: 0.7;
    filter: grayscale(50%);
}

.card img[loading="lazy"] {
    background: linear-gradient(90deg, #2a2a2a 0%, #333 50%, #2a2a2a 100%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

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

.magnified-card-container {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
}

.magnified-card {
    position: absolute;
    max-height: calc(100vh - 20px);
    max-width: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.magnified-card-left {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.magnified-card-right {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* Card Preview Panel - Detailed card information */
.card-preview-panel {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999 !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid rgba(0, 179, 55, 0.5);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 179, 55, 0.3);
    padding: 12px;
    width: 450px;
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    box-sizing: border-box;
}

.card-preview-panel.panel-right {
    right: 20px;
    left: auto;
    animation: slideInRight 0.3s ease-out;
    z-index: 99999 !important;
}

.card-preview-panel.panel-left {
    left: 20px;
    right: auto;
    animation: slideInLeft 0.3s ease-out;
    z-index: 99999 !important;
}

/* Screenshot modal card preview - positioned over charts section */
.screenshot-card-preview {
    z-index: 10000 !important;
    max-width: 400px;
    max-height: calc(100vh - 40px);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.card-preview-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    max-height: none;
}

.card-preview-image-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    flex-shrink: 1;
    flex-basis: auto;
    max-height: 200px;
    min-height: 120px;
    overflow: visible;
}

.card-preview-variant-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.95) 0%, rgba(0, 217, 68, 0.95) 100%);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 179, 55, 0.5);
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-preview-variant-btn:hover {
    background: linear-gradient(135deg, rgba(0, 217, 68, 0.95) 0%, rgba(0, 179, 55, 0.95) 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 179, 55, 0.7);
}

.card-preview-variant-btn:active {
    transform: scale(0.95);
}

.card-preview-image {
    max-width: 100%;
    max-height: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.card-preview-image.battlefield-rotated {
    transform: rotate(90deg);
    max-width: 380px;
    max-height: 100%;
}

.card-preview-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
}

.card-preview-effect {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    padding: 8px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid rgba(0, 179, 55, 0.5);
    white-space: pre-wrap;
    word-wrap: break-word;
    flex-shrink: 0;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

/* Style HTML tags within card effect text */
.card-preview-effect em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.95);
}

.card-preview-effect strong {
    font-weight: 700;
    color: #ffffff;
}

.card-preview-effect b {
    font-weight: 700;
    color: #ffffff;
}

.card-preview-effect i {
    font-style: italic;
}

.card-preview-effect u {
    text-decoration: underline;
}

.card-preview-effect code {
    background: rgba(0, 179, 55, 0.2);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* Game keyword styling */
.card-preview-effect .game-keyword {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 1px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    line-height: 1.4;
}

.card-preview-meta-condensed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 0;
    margin-bottom: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.card-preview-type,
.card-preview-rarity,
.card-preview-set {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-type {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.card-preview-rarity {
    font-weight: 700;
}

.card-preview-set {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

/* Game rarity colors */
.card-preview-rarity.rarity-common {
    background: #B9BFCF;
    color: #1a1a1a;
}

.card-preview-rarity.rarity-uncommon {
    background: #3DC6D1;
    color: #ffffff;
}

.card-preview-rarity.rarity-rare {
    background: #DF2385;
    color: #ffffff;
}

.card-preview-rarity.rarity-epic {
    background: #FC7A18;
    color: #ffffff;
}

.card-preview-rarity.rarity-showcase {
    background: #FC7A18;
    color: #ffffff;
}

.card-preview-rarity.rarity-legend {
    background: linear-gradient(135deg, #ff0000 0%, #ff6b6b 50%, #ff0000 100%);
    background-size: 200% 200%;
    animation: holographic-shimmer 3s ease-in-out infinite;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.card-preview-rarity.rarity-promo {
    background: linear-gradient(135deg, #e8e8e8 0%, #c0c0c0 25%, #a8a8a8 50%, #c0c0c0 75%, #e8e8e8 100%);
    background-size: 200% 200%;
    animation: holographic-shimmer 3s ease-in-out infinite;
    color: #2a2a2a;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

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

.card-preview-additional {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    flex-shrink: 0;
}

.card-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 11px;
}

.card-preview-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    text-align: right;
}

.card-preview-domains,
.card-preview-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.card-preview-tag {
    background-color: #69696B;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

/* Domain-specific styling */
.card-preview-value.domain-fury {
    background-color: #D81F1F;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value.domain-calm {
    background-color: #4F8E33;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value.domain-mind {
    background-color: #2D71A2;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value.domain-body {
    background-color: #E67411;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value.domain-chaos {
    background-color: #442E6D;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-value.domain-order {
    background-color: #D1AD0C;
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-stats {
    display: flex;
    gap: 4px;
    justify-content: space-around;
    padding: 6px 6px;
    margin: 4px 0;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.15) 0%, rgba(0, 179, 55, 0.05) 100%);
    border-radius: 8px;
    border: 2px solid rgba(0, 179, 55, 0.3);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.card-preview-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.2);
    transition: all 0.2s ease;
}

.card-preview-stat:hover {
    background: rgba(0, 179, 55, 0.1);
    border-color: rgba(0, 179, 55, 0.4);
    transform: translateY(-2px);
}

.card-preview-stat .stat-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-preview-stat .stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #00b337;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 179, 55, 0.5);
    font-family: 'Arial Black', Arial, sans-serif;
}

.card-preview-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin-top: 4px;
    background: rgba(0, 179, 55, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.3);
    gap: 8px;
    flex-wrap: wrap;
}

.card-preview-price .price-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.card-preview-price .price-value {
    font-size: 18px;
    font-weight: 700;
    color: #00b337;
}

.tcgplayer-buy-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #00b337 0%, #00d944 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.3);
    flex-shrink: 0;
}

.tcgplayer-buy-btn:hover {
    background: linear-gradient(135deg, #00d944 0%, #00b337 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.5);
}

.tcgplayer-buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 179, 55, 0.3);
}

/* Mobile adjustments for card preview */
@media (max-width: 768px) {
    .card-preview-panel {
        display: none !important;
    }
}

.deck {
    position: relative;
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    padding: 25px;
    align-content: start;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    min-height: calc(100vh - 400px);
}

.sideboard-section {
    margin-top: 20px;
    padding: 0;
    background: rgba(42, 42, 42, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(0, 179, 55, 0.3);
}

.sideboard-header {
    margin-bottom: 0;
    padding: 25px 25px 15px 25px;
}

.sideboard-header h3 {
    color: #00b337;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sideboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    padding: 25px;
    max-height: 400px;
    overflow-y: auto;
}

.sideboard-grid .deck-card {
    width: auto;
    height: auto;
}

.sideboard-mode-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid rgba(0, 179, 55, 0.3);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.sideboard-mode-btn:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: rgba(0, 179, 55, 0.5);
    transform: translateY(-1px);
}

.sideboard-mode-btn.active {
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.3) 0%, rgba(0, 138, 42, 0.3) 100%);
    border-color: #00b337;
    color: #00b337;
    box-shadow: 0 0 10px rgba(0, 179, 55, 0.3);
}

.runes-section {
    margin-top: 20px;
    padding: 15px;
    background: rgba(42, 42, 42, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.runes-header {
    margin-bottom: 15px;
}

.runes-header h3 {
    color: #8a2be2;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.runes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.runes-grid .deck-card {
    width: 80px;
    height: 112px;
}

.rune-mode-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.rune-mode-btn:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateY(-1px);
}

.rune-mode-btn.active {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(106, 13, 173, 0.3) 100%);
    border-color: #8a2be2;
    color: #8a2be2;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}

.deck-card-container {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.deck-card {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.deck-card:hover {
    transform: scale(1.1);
    z-index: 100;
}

.deck-card img {
    width: 150px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s, transform 0.3s;
}

.deck-card:hover img {
    box-shadow: 0 8px 20px rgba(0, 179, 55, 0.3);
}

.card-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
    transform: translate(0, 0);
    /* Prevent flickering during updates */
    will-change: contents;
    transition: none;
}

/* Card count badge in browser grid - same style */
.card-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
}

.card-count-controls {
    position: absolute;
    top: 50px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
    pointer-events: none;
}

.deck-card:hover .card-count-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.card-count-button {
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.95) 0%, rgba(0, 217, 68, 0.95) 100%);
    color: white;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 179, 55, 0.5);
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.card-count-button:hover {
    background: linear-gradient(135deg, rgba(0, 217, 68, 0.95) 0%, rgba(0, 179, 55, 0.95) 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 179, 55, 0.7);
}

.card-count-button:active {
    transform: scale(0.95);
}

/* Variant button - positioned top-right below controls */
.card-variant-palette-btn {
    position: absolute;
    top: 120px;
    right: 8px;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.95) 0%, rgba(0, 217, 68, 0.95) 100%);
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 179, 55, 0.5);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

/* Enable pointer events when card is hovered (for both grid cards and deck cards) */
.card:hover .card-variant-palette-btn,
.deck-card:hover .card-variant-palette-btn {
    opacity: 1;
    pointer-events: all;
}

.card-variant-palette-btn:hover {
    background: linear-gradient(135deg, rgba(0, 217, 68, 0.95) 0%, rgba(0, 179, 55, 0.95) 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 179, 55, 0.7);
}

.market-price {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
}

.market-price:hover {
    background: rgba(50, 50, 50, 0.95);
    transform: scale(1.05);
}

.deck-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: rgba(25, 25, 25, 0.8);
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(60, 60, 60, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.deck-controls::-webkit-scrollbar {
    height: 3px;
}

.deck-controls::-webkit-scrollbar-track {
    background: transparent;
}

.deck-controls::-webkit-scrollbar-thumb {
    background: rgba(0, 179, 55, 0.3);
    border-radius: 2px;
}

.button-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.button-group:not(:last-child) {
    margin-right: 0;
}

.button-group-title {
    display: none;
}

.button-group button {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(35, 35, 35, 0.8);
    border: 1px solid rgba(60, 60, 60, 0.6);
    border-radius: 5px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    line-height: 1.2;
    font-family: inherit;
}

.button-group button:hover {
    background: rgba(50, 50, 50, 0.9);
    border-color: rgba(80, 80, 80, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.button-group button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.button-group button:focus {
    outline: 2px solid rgba(100, 150, 255, 0.6);
    outline-offset: 2px;
}

.button-group button .btn-icon {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.button-group button .btn-text {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.2px;
}


/* Color variants */
.button-group button.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.button-group button.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fecaca;
}

.button-group button.btn-success {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.button-group button.btn-success:hover {
    background: rgba(34, 197, 94, 0.25);
    color: #bbf7d0;
}

.button-group button.btn-warning {
    background: rgba(251, 146, 60, 0.15);
    color: #fdba74;
}

.button-group button.btn-warning:hover {
    background: rgba(251, 146, 60, 0.25);
    color: #fed7aa;
}

.button-group button.btn-info {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.button-group button.btn-info:hover {
    background: rgba(59, 130, 246, 0.25);
    color: #bfdbfe;
}

.button-group button.btn-variant {
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
}

.button-group button.btn-variant:hover {
    background: rgba(168, 85, 247, 0.25);
    color: #ddd6fe;
}

.button-group button[id*="toggle"] {
    background: rgba(0, 179, 55, 0.12);
    color: #6ee7b7;
}

.deck-controls button.btn-success {
    background: rgba(30, 80, 40, 0.7);
    border-color: rgba(50, 120, 60, 0.6);
    color: #a7f3d0;
}

.deck-controls button.btn-success:hover {
    background: rgba(40, 100, 50, 0.9);
    border-color: rgba(60, 140, 70, 0.8);
}

.deck-controls button.btn-danger {
    background: rgba(80, 30, 30, 0.7);
    border-color: rgba(120, 50, 50, 0.6);
    color: #fca5a5;
}

.deck-controls button.btn-danger:hover {
    background: rgba(100, 40, 40, 0.9);
    border-color: rgba(140, 60, 60, 0.8);
}

.deck-controls button.btn-info {
    background: rgba(30, 50, 80, 0.7);
    border-color: rgba(50, 80, 120, 0.6);
    color: #93c5fd;
}

.deck-controls button.btn-info:hover {
    background: rgba(40, 60, 100, 0.9);
    border-color: rgba(60, 90, 140, 0.8);
}

.deck-controls button.btn-warning {
    background: rgba(80, 70, 30, 0.7);
    border-color: rgba(120, 100, 50, 0.6);
    color: #fde047;
}

.deck-controls button.btn-warning:hover {
    background: rgba(100, 85, 40, 0.9);
    border-color: rgba(140, 120, 60, 0.8);
}

.deck-controls button.btn-variant {
    background: rgba(70, 40, 80, 0.7);
    border-color: rgba(100, 60, 120, 0.6);
    color: #d8b4fe;
}

.deck-controls button.btn-variant:hover {
    background: rgba(85, 50, 100, 0.9);
    border-color: rgba(120, 70, 140, 0.8);
}

.deck-validation-status {
    padding: 6px 12px;
    margin: 4px 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    border: 1px solid;
}

.deck-validation-status.has-issues {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.deck-validation-status.has-warnings {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.4);
    color: #fdba74;
}

.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #2a2a2a;
    border-radius: 4px;
    margin-bottom: 10px;
    color: white;
}

.deck-header .deck-info {
    flex: 1;
}

.deck-header h2 {
    margin: 0 0 5px 0;
    font-size: 20px;
    color: white;
}

.deck-header p {
    margin: 0;
    font-size: 14px;
    color: #aaa;
}

.deck-stats {
    background: #2a2a2a;
    padding: 0;
    border-radius: 4px;
    margin-bottom: 8px;
    color: white;
    position: relative;
    overflow: visible;
    transition: max-height 0.3s ease;
    flex-shrink: 0;
}

.deck-stats.collapsed {
    max-height: 40px;
}

.deck-stats:not(.collapsed) {
    max-height: none;
    min-height: auto;
}

.stats-toggle-btn {
    background: rgba(0, 179, 55, 0.3);
    border: 1px solid rgba(0, 179, 55, 0.5);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
}

.stats-toggle-btn:hover {
    background: rgba(0, 179, 55, 0.5);
    transform: scale(1.05);
}

.deck-stats.collapsed .stats-toggle-btn {
    background: rgba(0, 179, 55, 0.5);
    border-color: rgba(0, 179, 55, 0.7);
}

.stats-content {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 15px;
    min-height: 280px;
}

.deck-stats.collapsed .stats-content {
    display: none;
}

.deck-summary p {
    margin: 5px 0;
    font-size: 14px;
}

.stats-info-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px;
    width: 40%;
    flex-shrink: 0;
}

.deck-summary {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(40, 40, 40, 0.6);
    border-radius: 3px;
    border: 1px solid rgba(60, 60, 60, 0.5);
    min-width: 0;
    overflow: visible;
}

.stat-label {
    font-size: 9px;
    color: #aaa;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.stat-value {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.stat-suffix {
    font-size: 9px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.stat-value.validation-success {
    color: #4caf50;
}

.stat-value.validation-warning {
    color: #ffc107;
}

.stat-value.validation-error {
    color: #f44336;
}


.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.breakdown-section {
    background: rgba(35, 35, 35, 0.6);
    border-radius: 4px;
    padding: 6px 8px;
    border: 1px solid rgba(60, 60, 60, 0.5);
}

.breakdown-section h4 {
    margin: 0 0 6px 0;
    font-size: 9px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 100px;
    overflow-y: auto;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    background: rgba(50, 50, 50, 0.4);
    border-radius: 3px;
    font-size: 10px;
}

.breakdown-name {
    color: #ddd;
    flex: 1;
    text-transform: capitalize;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breakdown-count {
    color: #fff;
    font-weight: 600;
    background: rgba(0, 179, 55, 0.3);
    padding: 2px 5px;
    border-radius: 3px;
    min-width: 20px;
    text-align: center;
    font-size: 9px;
    flex-shrink: 0;
}

.charts-section {
    margin-top: 10px;
    position: relative;
}

.charts-toggle-btn {
    background: rgba(75, 192, 192, 0.3);
    border: 1px solid rgba(75, 192, 192, 0.5);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.charts-toggle-btn:hover {
    background: rgba(75, 192, 192, 0.5);
    transform: scale(1.02);
}

.charts-toggle-icon {
    font-size: 14px;
}

.charts-toggle-text {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.charts-section.collapsed .charts-wrapper {
    display: none;
}

.charts-section.collapsed .charts-toggle-btn {
    background: rgba(75, 192, 192, 0.2);
    border-color: rgba(75, 192, 192, 0.4);
}

.charts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
}

.charts-wrapper .breakdown-grid {
    margin-top: 0;
}

.charts-wrapper .charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    min-height: auto;
    overflow: visible;
}

.stats-info-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}

.deck-summary {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 0;
    margin: 0;
    width: 100%;
}

.chart-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    margin: 0;
    min-height: 250px;
    position: relative;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(60, 60, 60, 0.5);
}

.chart-label {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 7px;
    background: rgba(75, 192, 192, 0.3);
    border-radius: 3px;
    margin-bottom: 6px;
    z-index: 10;
}


.chart-container canvas {
    width: 100% !important;
    height: 250px !important;
    flex: 1;
}

/* Mobile: stack charts vertically - handled in main mobile media query below */

.card-variant-button {
    background: rgba(0, 179, 55, 0.2);
    border: 1px solid rgba(0, 179, 55, 0.5);
    color: #00b337;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.card-variant-button:hover {
    background: rgba(0, 179, 55, 0.3);
    border-color: #00b337;
    transform: scale(1.05);
}

.empty-deck-message {
    text-align: center;
    color: #888;
    padding: 40px;
    font-size: 18px;
}

.resizer {
    width: 8px;
    cursor: ew-resize;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 100%;
}

.resizer:hover {
    width: 12px;
    background: linear-gradient(to right, rgba(0, 179, 55, 0.2), rgba(0, 179, 55, 0.4), rgba(0, 179, 55, 0.2));
    border-left: 1px solid rgba(0, 179, 55, 0.3);
    border-right: 1px solid rgba(0, 179, 55, 0.3);
    box-shadow: 0 0 10px rgba(0, 179, 55, 0.3);
}

.resizer-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 0;
}

.resizer-dots {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.resizer-dots span {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: block;
    transition: all 0.2s ease;
}

.resizer:hover .resizer-dots span {
    background: rgba(0, 179, 55, 0.8);
    width: 4px;
    height: 4px;
    box-shadow: 0 0 4px rgba(0, 179, 55, 0.6);
}

.resizer-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    transform: translateY(-50%);
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.95), rgba(0, 150, 50, 0.95));
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 179, 55, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resizer-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(0, 179, 55, 0.95);
}

.resizer:hover .resizer-tooltip {
    opacity: 1;
    visibility: visible;
    left: calc(100% + 20px);
}

.resizer-reset-btn {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.85), rgba(0, 150, 50, 0.85));
    color: white;
    border: 1px solid rgba(0, 179, 55, 0.6);
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 0;
    opacity: 0.8;
    visibility: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 24px;
    pointer-events: auto;
}

.resizer:hover .resizer-reset-btn {
    opacity: 1;
}

.resizer-reset-btn:hover {
    background: linear-gradient(135deg, rgba(0, 179, 55, 1), rgba(0, 150, 50, 1));
    border-color: rgba(0, 179, 55, 0.9);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 179, 55, 0.5);
}

.resizer-reset-btn:active {
    transform: translateX(-50%) scale(0.95);
    box-shadow: 0 2px 6px rgba(0, 179, 55, 0.4);
}

.reset-icon {
    font-size: 14px;
    display: block;
    transition: transform 0.3s ease;
    line-height: 1;
}

.resizer-reset-btn:hover .reset-icon {
    transform: rotate(-180deg);
}

.reset-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1;
    font-size: 9px;
}

.reset-text span {
    display: block;
    line-height: 1.1;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #2a2a2a;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    animation: slideIn 0.3s ease;
}

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

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Loading state */
.loading {
    text-align: center;
    color: #888;
    padding: 40px;
    font-size: 18px;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 179, 55, 0.2);
    border-top-color: #00b337;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.loading-message {
    font-size: 16px;
    font-weight: 500;
    color: #e0e0e0;
}

.loading-progress {
    font-size: 13px;
    color: #888;
    min-height: 18px;
}

.loading-skeleton {
    text-align: center;
    color: #888;
    padding: 40px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin: 20px;
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* Error message */
.error-message {
    text-align: center;
    color: #ff6b6b;
    padding: 40px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    margin: 20px;
}

.error-message h3 {
    margin-top: 0;
}

.error-message button {
    margin-top: 15px;
    padding: 10px 20px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.error-message button:hover {
    background: #ff5252;
}

/* Deck validation */
.deck-validation {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
}

.validation-warning {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid #ffc107;
    color: #ffc107;
    padding: 10px;
    border-radius: 4px;
}

.validation-warning ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.validation-warning li {
    margin: 5px 0;
}

.validation-success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4caf50;
    color: #4caf50;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    .site-header {
        height: 50px;
        padding: 0 12px;
    }

    .header-content {
        gap: 12px;
    }

    .site-logo {
        height: 32px;
        max-width: 150px;
    }

    .breadcrumbs {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-item {
        font-size: 12px;
        flex-shrink: 0;
    }

    .breadcrumb-separator {
        font-size: 14px;
        flex-shrink: 0;
    }

    /* Hide desktop deck-controls on mobile - functions are in mobile control panel */
    .deck-controls {
        display: none !important;
    }

    /* Mobile-first layout: Card grid is main view */
    .app-container {
        flex-direction: column;
        height: calc(100vh - 50px);
        margin-top: 50px;
        position: relative;
    }

    /* Mobile Layout: Toggle between Search View and Deck View */
    .app-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 50px);
        margin-top: 50px;
        position: relative;
        overflow: hidden;
    }

    /* Left side (search + card grid) - Full screen when active */
    .left-side {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70px; /* Space for bottom control panel */
        width: 100% !important;
        height: calc(100vh - 50px - 70px);
        background: linear-gradient(to bottom, #313131, #131313);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 1;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .left-side.mobile-hidden {
        transform: translateX(-100%);
    }

    /* Search header - compact at top */
    .left-side .header {
        padding: 8px 12px;
        background: #2a2a2a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .left-side .search-bar {
        gap: 8px;
    }

    .left-side .search-input-container {
        gap: 8px;
    }

    #searchInput {
        font-size: 14px;
        padding: 10px 12px;
    }

    .help-button {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    /* Filters - compact, always visible */
    .filter-container {
        padding: 8px 12px;
        gap: 6px;
        flex-wrap: wrap;
        max-height: 140px;
        overflow-y: auto;
        flex-shrink: 0;
        background: #2a2a2a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .filter-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Card grid - takes remaining space */
    #cardList {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
        padding: 0;
    }

    /* Right side (deck) - Full screen when active, optimized for screenshots */
    /* Right side (deck) - Full screen when active */
    .right-side {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70px; /* Space for bottom control panel */
        width: 100% !important;
        height: calc(100vh - 50px - 70px);
        background: #1a1a1a;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 6px;
        display: flex;
        flex-direction: column;
        z-index: 2;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure stats panel can escape right-side container */
    .right-side #deckStats {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        width: 100vw !important;
        z-index: 5000 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .right-side.mobile-active {
        transform: translateX(0);
    }

    /* Deck grid - Optimized to fit all cards in view for mobile screenshots */
    .right-side .deck-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
        padding: 0;
        width: 100%;
    }

    .right-side .deck-card {
        aspect-ratio: 63 / 88; /* Standard card ratio */
        width: 100%;
        position: relative;
    }

    .right-side .deck-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 2px;
    }

    /* Hide deck date on mobile - only needed for screenshots */
    .right-side .deck-date,
    .right-side #deck-date {
        display: none !important;
    }

    /* Hide deck stats in mobile deck view - available via Stats button */
    .right-side .deck-stats {
        display: none !important;
    }
    
    /* Mobile stats panel - override the above when open (higher specificity) */
    .right-side .deck-stats.open,
    .deck-stats.open {
        display: block !important;
    }

    /* Mobile-compatible sideboard section */
    .right-side .sideboard-section {
        margin-top: 8px;
        padding: 8px;
        background: rgba(42, 42, 42, 0.8);
        border-radius: 6px;
        border: 1px solid rgba(0, 179, 55, 0.3);
    }

    .right-side .sideboard-header {
        padding: 6px 0;
        margin-bottom: 6px;
    }

    .right-side .sideboard-header h3 {
        font-size: 12px !important;
        margin: 0 !important;
        color: #00b337;
    }

    .right-side .sideboard-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
        padding: 0;
        max-height: none !important;
        overflow: visible !important;
    }

    .right-side .sideboard-grid .deck-card {
        aspect-ratio: 63 / 88;
        width: 100%;
    }

    .right-side .sideboard-grid .deck-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 2px;
    }

    /* Mobile-only card count styling - smaller and top-right */
    .right-side .deck-card .card-count,
    .right-side .sideboard-grid .deck-card .card-count {
        top: 4px !important;
        right: 4px !important;
        font-size: 12px !important;
        padding: 2px 6px !important;
        border-radius: 3px !important;
    }

    /* Mobile-only price styling - smaller and bottom-left */
    .right-side .deck-card .market-price,
    .right-side .sideboard-grid .deck-card .market-price {
        bottom: 4px !important;
        left: 4px !important;
        font-size: 10px !important;
        padding: 2px 5px !important;
        border-radius: 3px !important;
    }


    /* Compact deck header for mobile */
    .right-side .deck-header {
        padding: 4px 0 !important;
        margin-bottom: 4px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .right-side .deck-header h2 {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .right-side .deck-header p {
        font-size: 10px !important;
        margin: 2px 0 0 0 !important;
    }

    /* Mobile Bottom Control Panel - Matches reference site */
    .mobile-control-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: 50px;
        background: #2a2a2a;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        z-index: 3000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }

    .mobile-controls-left {
        display: flex;
        gap: 4px;
        flex: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 12px;
        align-items: center;
    }

    .mobile-controls-left::-webkit-scrollbar {
        display: none;
    }

    .mobile-control-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: auto;
        height: 36px;
        padding: 8px 14px;
        background: rgba(35, 35, 35, 0.8);
        border: 1px solid rgba(60, 60, 60, 0.6);
        border-radius: 5px;
        color: #e0e0e0;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        line-height: 1.2;
    }

    .mobile-control-btn:hover {
        background: rgba(50, 50, 50, 0.9);
        border-color: rgba(80, 80, 80, 0.8);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .mobile-control-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .mobile-btn-icon {
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.85;
        line-height: 1;
    }

    .mobile-btn-text {
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }

    /* View toggle button styling - matches desktop toggle buttons */
    .mobile-view-toggle {
        background: rgba(0, 179, 55, 0.12) !important;
        border-color: rgba(0, 179, 55, 0.3) !important;
        color: #6ee7b7 !important;
    }

    .mobile-view-toggle:hover {
        background: rgba(0, 179, 55, 0.2) !important;
        border-color: rgba(0, 179, 55, 0.4) !important;
        color: #86efac !important;
    }

    /* Deck-only buttons - shown only in deck view */
    .mobile-deck-only {
        display: none;
    }
    
    .deck-header {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .deck-header h2 {
        font-size: 18px;
    }
    
    .deck-header p {
        font-size: 12px;
    }

    .resizer {
        display: none !important;
    }

    .search-input-container {
        width: 100%;
        padding: 0 10px;
    }

    .search-input-container input[type="text"] {
        flex: 1;
        min-width: 0;
    }

    .search-input-container button {
        flex-shrink: 0;
    }

    .filter-container {
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap;
        padding: 8px 12px;
        position: relative;
        z-index: 100;
    }

    .filter-container select {
        width: 100%;
    }

    /* Mobile filter button wrapper - ensure proper positioning */
    .filter-btn-wrapper {
        position: relative;
        z-index: 1001;
    }

    /* Mobile filter dropdowns - full width and properly positioned */
    /* Move dropdowns to body level to escape overflow constraints */
    .filter-dropdown {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        max-height: 60vh !important;
        z-index: 10000 !important; /* Higher than site header and mobile controls */
        transform: none !important;
        /* Remove top/bottom auto to allow JS positioning */
    }

    /* Position dropdown below the button that opened it */
    .filter-btn-wrapper .filter-dropdown {
        position: fixed !important;
        z-index: 10000 !important;
    }
    
    /* Ensure dropdown header and content are visible */
    .filter-dropdown-header {
        position: relative;
        z-index: 1;
    }
    
    .filter-dropdown-content {
        position: relative;
        z-index: 1;
    }

    /* Ensure filter buttons are clickable on mobile */
    .filter-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 179, 55, 0.3);
        pointer-events: auto;
        z-index: 1002;
    }

    .filter-btn.active {
        z-index: 1003;
    }

    /* Mobile filter options - larger touch targets */
    .filter-option {
        min-height: 44px; /* iOS recommended touch target size */
        padding: 10px 12px !important;
        font-size: 14px;
    }

    .filter-option input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }

    /* Mobile filter dropdown content - ensure scrollable */
    .filter-dropdown-content {
        max-height: 50vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile filter dropdown header buttons - larger touch targets */
    .filter-select-all-btn,
    .filter-clear-btn {
        min-height: 36px;
        padding: 8px 12px !important;
        font-size: 12px;
    }

    /* TCGPlayer Instructions Modal - Mobile Optimizations */
    .tcgplayer-instructions-modal {
        padding: 10px !important;
    }

    .tcgplayer-instructions {
        padding: 20px !important;
        max-height: 85vh !important;
        margin: 10px !important;
    }

    .tcgplayer-close-x {
        width: 44px !important;
        height: 44px !important;
        font-size: 24px !important;
        top: 10px !important;
        right: 10px !important;
        -webkit-tap-highlight-color: rgba(255, 107, 107, 0.3);
        touch-action: manipulation;
    }

    .tcgplayer-close-btn {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 14px 24px !important;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .deck-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 20px;
        padding: 20px;
        min-height: auto;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .deck-card img {
        width: 140px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        border-radius: 6px;
    }
    
    .deck-card:hover img {
        box-shadow: 0 8px 20px rgba(0, 179, 55, 0.3);
    }

    /* Deck Stats - Modal overlay instead of sliding up */
    #deckStats {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        width: 100% !important;
        background: linear-gradient(to bottom, #313131, #131313) !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 15px !important;
        overflow-y: auto !important;
        z-index: 4000 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #deckStats.open {
        transform: translateY(0) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Override any right-side hiding for mobile - must be very specific */
    .right-side #deckStats,
    .right-side #deckStats.open {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        width: 100% !important;
        z-index: 4000 !important;
    }
    
    .right-side #deckStats.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    
    .deck-stats.collapsed {
        max-height: none;
    }
    
    .stats-toggle-btn {
        display: none;
    }
    
    /* Ensure stats content is visible on mobile when open */
    #deckStats.open .stats-content,
    .deck-stats.open .stats-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #deckStats .stats-content,
    .deck-stats .stats-content {
        flex-direction: column;
        padding-top: 15px;
        min-height: auto;
    }
    
    /* Ensure all stats content elements are visible */
    #deckStats.open .stats-info-container,
    #deckStats.open .deck-summary,
    #deckStats.open .stats-grid,
    #deckStats.open .stat-item {
        display: block !important;
        visibility: visible !important;
    }
    
    .deck-stats .stats-info-container {
        width: 100%;
    }
    
    .deck-stats .charts-wrapper {
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 10px 0;
    }
    
    .deck-stats .chart-container {
        height: 250px;
    }

    /* Mobile Stats Modal - Separate overlay */
    .mobile-stats-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-stats-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-stats-content {
        width: 100%;
        max-height: 90vh;
        background: linear-gradient(to bottom, #313131, #131313);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    }

    .mobile-stats-modal.open .mobile-stats-content {
        transform: translateY(0);
    }

    .mobile-stats-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 0;
        background: linear-gradient(to bottom, #313131, #131313);
        z-index: 1;
    }

    .mobile-stats-header h2 {
        color: white;
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .mobile-stats-close {
        background: transparent;
        border: none;
        color: white;
        font-size: 32px;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s ease;
    }

    .mobile-stats-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-stats-body {
        padding: 20px;
    }

    .mobile-stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .mobile-stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: rgba(40, 40, 40, 0.6);
        border-radius: 8px;
        border: 1px solid rgba(60, 60, 60, 0.5);
    }

    .mobile-stat-label {
        font-size: 12px;
        color: #aaa;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-stat-value {
        font-size: 16px;
        color: #fff;
        font-weight: 600;
    }

    .mobile-stats-charts {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mobile-chart-wrapper {
        background: rgba(40, 40, 40, 0.6);
        border-radius: 8px;
        padding: 15px;
        border: 1px solid rgba(60, 60, 60, 0.5);
    }

    .mobile-chart-label {
        color: #00b337;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        text-align: center;
    }

    .mobile-chart-canvas {
        width: 100%;
        height: auto;
        max-height: 250px;
    }

    .deck-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        background: #1e1e1e;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 10px;
        padding-bottom: 80px;
        z-index: 1000;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1px;
        max-height: 70vh;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    }

    .deck-controls.open {
        transform: translateY(0);
    }

    .deck-controls .button-group {
        flex-direction: row;
        gap: 1px;
        padding: 2px;
        min-width: auto;
        flex-shrink: 0;
        margin-right: 4px;
    }

    .deck-controls .button-group:not(:last-child)::after {
        display: none;
    }

    .deck-controls .button-group-title {
        display: none;
    }

    .deck-controls button {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
        min-width: auto;
        flex-shrink: 0;
        height: 32px;
    }

    /* Mobile Toggle Buttons - Clean & Functional */
    .search-toggle,
    .deck-stats-toggle,
    .deck-controls-toggle {
        display: flex !important;
        position: fixed;
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(0, 179, 55, 0.95) 0%, rgba(0, 217, 68, 0.95) 100%);
        border: 2px solid rgba(0, 179, 55, 0.6);
        color: white;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        z-index: 9001;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 179, 55, 0.4);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        line-height: 1.2;
        text-align: center;
        padding: 6px 4px;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .search-toggle:hover,
    .deck-stats-toggle:hover,
    .deck-controls-toggle:hover {
        background: linear-gradient(135deg, rgba(0, 217, 68, 0.95) 0%, rgba(0, 179, 55, 0.95) 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 179, 55, 0.5);
        border-color: rgba(0, 217, 68, 0.8);
    }

    .search-toggle:active,
    .deck-stats-toggle:active,
    .deck-controls-toggle:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 179, 55, 0.3);
    }

    /* Individual button positioning - ensure all are visible with proper spacing */
    .search-toggle {
        bottom: 20px;
        right: 16px;
    }

    .deck-stats-toggle {
        bottom: 88px;
        right: 16px;
    }

    .deck-controls-toggle {
        bottom: 156px;
        right: 16px;
    }

    /* Active state indicator */
    .search-toggle.active,
    .deck-stats-toggle.active,
    .deck-controls-toggle.active {
        background: linear-gradient(135deg, rgba(0, 217, 68, 1) 0%, rgba(0, 179, 55, 1) 100%);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.2) inset, 0 2px 6px rgba(0, 179, 55, 0.6);
    }

    .empty-deck-message {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        text-align: center;
        z-index: 100;
    }

    .magnified-card {
        display: none !important;
    }

    .card-count-controls {
        display: none !important;
    }
}

/* Card Modal */
.card-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-modal {
    background: #2a2a2a;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Mobile optimizations for card modal */
@media (max-width: 768px) {
    .card-modal-overlay {
        padding: 10px;
        align-items: flex-start;
        padding-top: 20px;
    }
    
    .card-modal {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
        max-height: calc(100vh - 40px);
        padding: 12px;
        border-radius: 8px;
        margin: 0 auto;
    }
}

.card-modal-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-modal-header h3 {
    color: white;
    margin: 0;
    font-size: 18px;
    flex: 1;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-right: 8px;
}

@media (max-width: 768px) {
    .card-modal-header h3 {
        font-size: 16px;
        line-height: 1.3;
        padding-right: 4px;
    }
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-modal-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .card-modal-image {
        max-width: 100%;
        max-height: 40vh;
        object-fit: contain;
        margin-bottom: 12px;
    }
}

.card-modal-info {
    width: 100%;
    color: white;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .card-modal-info {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.4;
    }
}

.modal-variant-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    padding: 10px 20px;
    margin: 10px auto 15px auto;
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.8) 0%, rgba(0, 217, 68, 0.8) 100%);
    border: 1px solid rgba(0, 179, 55, 0.5);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .modal-variant-btn {
        max-width: 100%;
        padding: 8px 16px;
        margin: 8px auto 12px auto;
        font-size: 14px;
    }
}

.modal-variant-btn:hover {
    background: linear-gradient(135deg, rgba(0, 217, 68, 0.9) 0%, rgba(0, 179, 55, 0.9) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.modal-variant-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.modal-variant-btn span:first-child {
    font-size: 18px;
}

.modal-primary-btn {
    background: linear-gradient(135deg, rgba(0, 179, 55, 0.8) 0%, rgba(0, 217, 68, 0.8) 100%) !important;
    border: 1px solid rgba(0, 179, 55, 0.5) !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    flex: none !important;
    max-width: none !important;
}

.modal-primary-btn:hover {
    background: linear-gradient(135deg, rgba(0, 217, 68, 0.9) 0%, rgba(0, 179, 55, 0.9) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.modal-primary-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.modal-secondary-btn {
    background: rgba(0, 179, 55, 0.15);
    border: 1px solid rgba(0, 179, 55, 0.4);
    color: #6ee7b7;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-secondary-btn:hover {
    background: rgba(0, 179, 55, 0.25);
    border-color: rgba(0, 179, 55, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.modal-secondary-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card-modal-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    justify-content: center;
}

.modal-quantity-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .card-modal-controls {
        gap: 12px;
        width: 100%;
    }
    
    .modal-quantity-group {
        gap: 8px;
        flex-wrap: wrap;
    }
}

.modal-quantity-label {
    color: white;
    font-size: 14px;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

@media (max-width: 768px) {
    .modal-quantity-label {
        font-size: 12px;
        min-width: 70px;
    }
}

.card-modal-controls button {
    padding: 10px 20px;
    font-size: 18px;
    min-width: 50px;
}

@media (max-width: 768px) {
    .card-modal-controls button {
        padding: 8px 16px;
        font-size: 16px;
        min-width: 44px;
    }
}

.modal-primary-btn {
    background: #daa33e !important;
    flex: 1;
    max-width: 200px;
}

.modal-primary-btn:hover {
    background: #c8942e !important;
}

.modal-secondary-btn {
    background: rgba(0, 179, 55, 0.8) !important;
    flex: 1;
    max-width: 200px;
    margin-left: 8px;
}

.modal-secondary-btn:hover {
    background: rgba(0, 217, 68, 0.9) !important;
}

.card-modal-controls span {
    color: white;
    font-size: 20px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

@media (max-width: 768px) {
    .card-modal-controls span {
        font-size: 18px;
        min-width: 28px;
    }
}

/* Variant Selector Modal */
.variant-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 179, 55, 0.5) rgba(42, 42, 42, 0.3);
}

.variant-grid::-webkit-scrollbar {
    width: 8px;
}

.variant-grid::-webkit-scrollbar-track {
    background: rgba(42, 42, 42, 0.3);
    border-radius: 4px;
}

.variant-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 179, 55, 0.5);
    border-radius: 4px;
}

.variant-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 179, 55, 0.7);
}

/* Mobile optimizations for variant selector modal */
@media (max-width: 768px) {
    /* Override inline styles for variant grid on mobile - smaller columns for more variants */
    .card-modal .variant-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 8px !important;
        max-height: 45vh !important;
        padding: 8px !important;
        margin: 10px 0 !important;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto !important;
    }
    
    /* Ensure variant selector modal fits on screen */
    #card-variant-selector-modal .card-modal {
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        max-height: calc(100vh - 40px) !important;
        padding: 12px !important;
    }
    
    /* Make variant cards smaller and more compact on mobile */
    .variant-option {
        min-width: 0 !important;
        padding: 6px !important;
        border-width: 1.5px !important;
    }
    
    /* Smaller variant card images on mobile */
    .variant-option img {
        margin-bottom: 4px !important;
    }
    
    /* Ensure variant text doesn't overflow - override inline styles */
    .variant-option > div {
        font-size: 10px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Smaller card name text */
    .variant-option > div:first-of-type {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    
    /* Smaller set/rarity text */
    .variant-option > div:nth-of-type(2),
    .variant-option > div:nth-of-type(3) {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }
    
    /* Smaller variant label */
    .variant-option > div:nth-of-type(4) {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }
    
    /* Smaller price text */
    .variant-option > div:last-of-type {
        font-size: 9px !important;
        margin-top: 2px !important;
    }
    
    /* Smaller CURRENT badge */
    .variant-option > div[style*="position: absolute"] {
        font-size: 8px !important;
        padding: 1px 4px !important;
        top: 3px !important;
        right: 3px !important;
    }
    
    /* Ensure modal header text fits */
    #card-variant-selector-modal .card-modal-header h3 {
        font-size: 14px !important;
    }
    
    /* Smaller description text in variant modal */
    #card-variant-selector-modal .card-modal > div[style*="width: 100%"] {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }
}

.variant-option {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.variant-option:hover {
    transform: translateY(-2px);
}

.variant-option.selected {
    animation: variantSelectPulse 0.3s ease;
}

@keyframes variantSelectPulse {
    0% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0, 179, 55, 0.6);
    }
    100% {
        box-shadow: 0 4px 16px rgba(0, 179, 55, 0.4);
    }
}

.card-variant-palette-btn {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.card-variant-palette-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 179, 55, 0.4) !important;
}

/* Screenshot Modal Styles */
.screenshot-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.screenshot-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10001;
    /* Don't block clicks to controls - they're at z-index 10002 */
}

.screenshot-modal-content {
    position: relative;
    width: 1920px;
    height: 1080px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 179, 55, 0.3);
    z-index: 10001;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Always render at 1920x1080 regardless of device - overlay handles scrolling */
}

.screenshot-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    z-index: 10002;
    transition: background 0.2s ease;
}

.screenshot-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.screenshot-deck-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.screenshot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(0, 179, 55, 0.2);
    position: relative;
    min-height: 130px;
    flex-shrink: 0;
}

.screenshot-header-bottom {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.screenshot-branding {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* Evenly space all items */
    gap: 20px; /* Equal gap between all items */
    margin-bottom: 15px;
    width: 100%;
}

/* Prevent inline styles from overriding CSS */
.screenshot-brand-text[style] {
    width: auto !important;
    max-width: 400px !important;
}

.screenshot-logo-img {
    width: 80px;
    height: 80px;
    min-width: 80px; /* Hard-coded min */
    max-width: 80px; /* Hard-coded max */
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.screenshot-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 48px;
    background: linear-gradient(45deg, #00b337, #e4007c, #0072b6, #744c95);
    color: white;
    font-weight: 900;
}

.screenshot-brand-text {
    flex: 0 1 auto; /* Don't grow, can shrink, auto basis */
    min-width: 200px; /* Minimum width to prevent too small */
    max-width: 400px !important; /* Hard-coded max value, override inline styles */
    width: auto !important; /* Prevent inline width styles */
    display: block; /* Not a flex container */
}

.screenshot-brand-text h1 {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 800;
    color: white;
    margin: 0 0 4px 0; /* Add spacing between h1 and p */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-brand-text p {
    font-size: clamp(11px, 1vw, 16px);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 4px 0; /* Add spacing between paragraphs */
    white-space: normal; /* Allow text to wrap */
    overflow: visible; /* Show full text */
    text-overflow: clip; /* Don't use ellipsis */
    line-height: 1.3;
    word-wrap: break-word; /* Break long words if needed */
}

.screenshot-made-on {
    font-size: clamp(9px, 0.8vw, 12px) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    font-style: italic !important;
    white-space: normal !important; /* Allow line breaks from <br> */
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important; /* Break long words if needed */
    max-width: 100% !important; /* Ensure it fits within container */
}

.screenshot-main-stats {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.screenshot-header-special-cards {
    flex: 1 1 auto; /* Grow and shrink, take available space */
    min-width: 300px; /* Minimum width to prevent too small */
    max-width: none; /* Will be set by user later */
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
    justify-content: flex-end; /* Push content to the right, closer to QR code */
    z-index: 5;
    max-height: 220px; /* Increased to accommodate larger hero cards */
    position: relative;
    margin-left: auto; /* Push entire container to the right */
}

.screenshot-special-cards-container {
    display: flex;
    flex-direction: row;
    gap: 20px; /* Gap between Legend and middle column */
    align-items: flex-start;
    width: auto; /* Don't take full width, just fit content */
    height: 100%;
    position: relative;
    justify-content: flex-end; /* Align content to the right */
}

/* Left column: Legend (full height) - Hero/Headliner size */
.screenshot-legend-group {
    height: 220px; /* Increased for hero section */
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* Middle column: Runes and Battlefields side by side - Hero/Headliner size */
.screenshot-special-cards-middle {
    display: flex;
    flex-direction: row; /* Side by side instead of stacked */
    gap: 30px; /* Increased gap between Runes and Battlefields to prevent spillover */
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Start from left */
    height: 220px; /* Increased for hero section */
    min-width: 0; /* Allow flex to shrink */
    flex-shrink: 0;
    overflow: visible; /* Allow battlefields to be visible even if larger */
    width: auto; /* Auto width to accommodate battlefield cards */
}

.screenshot-rune-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center; /* Center runes horizontally */
    justify-content: center; /* Center runes vertically */
    flex-shrink: 0; /* Don't let runes shrink, keep them at their size */
    height: 100%; /* Match battlefield height */
}

.screenshot-battlefield-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    justify-content: center; /* Center vertically when side by side */
    max-height: none; /* Remove max-height constraint to allow battlefields to grow */
    height: 100%; /* Match rune group height */
    overflow: visible; /* Allow overflow if needed for larger cards */
    width: auto; /* Auto width, not full width */
    min-width: fit-content; /* Ensure enough width for all cards with gaps */
    flex-shrink: 0;
    max-width: none; /* No max width constraint */
}

.screenshot-special-cards-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center; /* Center items including label */
    position: relative;
}

.screenshot-special-cards-label {
    font-size: 12px; /* Increased for hero section */
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px; /* Increased spacing */
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center; /* Center the text */
    width: 100%; /* Full width to center properly */
}

.screenshot-special-cards-grid {
    display: flex;
    gap: 8px; /* Increased from 6px for better spacing between cards */
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

/* Legend card - full size, on left - Hero/Headliner size */
.screenshot-legend-group .screenshot-card-item-small {
    width: auto;
    height: 220px; /* Increased for hero section */
    max-width: 180px; /* Significantly increased for hero section */
    position: relative;
    z-index: 1;
}

.screenshot-legend-group .screenshot-card-item-small .screenshot-card-image-container {
    aspect-ratio: 63/88;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rune cards - Same size as battlefields when rotated */
.screenshot-rune-group .screenshot-card-item-small {
    width: auto;
    height: 180px; /* Same size as battlefields (when rotated, this becomes the width) */
    max-width: 130px; /* Same size as battlefields */
}

.screenshot-rune-group .screenshot-card-item-small .screenshot-card-image-container {
    aspect-ratio: 63/88;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Battlefield cards - rotated 90 degrees, same size as runes */
/* When rotated 90deg: width becomes height, height becomes width */
/* Size the container for the ROTATED dimensions - we want 180px visible height, 130px visible width */
.screenshot-battlefield-group .screenshot-card-item-small {
    /* Before rotation: width=130px (becomes visible height), height=180px (becomes visible width) */
    width: 130px; /* This becomes the visible height after 90deg rotation */
    height: 180px; /* This becomes the visible width after 90deg rotation */
    transform: rotate(90deg) !important; /* Force rotation, prevent hover changes */
    transform-origin: center;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Prevent battlefield cards from rotating on hover */
.screenshot-battlefield-group .screenshot-card-item-small:hover {
    transform: rotate(90deg) !important; /* Keep rotated on hover */
}

.screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-image-container {
    /* Container is NOT rotated - it's inside the rotated card item */
    /* Card is portrait (63/88) before rotation, landscape (88/63) after rotation */
    aspect-ratio: 63/88; /* Portrait ratio - card's natural orientation */
    height: 100%; /* Fill the container height (180px before rotation) */
    width: 100%; /* Fill the container width (130px before rotation) */
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.screenshot-battlefield-group .screenshot-special-cards-grid {
    display: flex;
    gap: 60px; /* Even larger gap to prevent any overlap between rotated cards */
    flex-wrap: nowrap; /* Prevent wrapping to keep cards in line */
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    width: auto; /* Auto width to fit content with gaps */
    min-width: fit-content; /* Ensure container is wide enough */
    overflow: visible; /* Allow cards to be fully visible */
}

.screenshot-card-item-small {
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.screenshot-card-item-small .screenshot-card-image-container {
    aspect-ratio: 63/88;
    position: relative;
}

.screenshot-card-item-small .screenshot-card-quantity {
    position: absolute;
    top: clamp(4px, 0.5vw, 6px);
    right: clamp(4px, 0.5vw, 6px);
    font-size: clamp(5px, 0.6vw, 7px);
    padding: clamp(1px, 0.2vw, 2px) clamp(2px, 0.4vw, 4px);
    min-width: clamp(12px, 1.5vw, 18px);
    z-index: 10;
}

/* Rune quantity badges - make them much larger, same size as price */
.screenshot-rune-group .screenshot-card-item-small .screenshot-card-quantity {
    font-size: clamp(6px, 0.8vw, 10px); /* Match small card price size */
    padding: clamp(2px, 0.3vw, 4px) clamp(3px, 0.5vw, 5px); /* Match small card price padding */
    min-width: clamp(16px, 2vw, 22px); /* Match small card price min-width */
    font-weight: 700; /* Match price font weight */
    background: rgba(0, 0, 0, 0.9); /* Make it more prominent */
    border-radius: 4px; /* Match price border radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow like price */
}

.screenshot-card-item-small .screenshot-card-price {
    position: absolute;
    bottom: clamp(18px, 2.2vw, 26px); /* Position above card name */
    left: clamp(4px, 0.5vw, 6px);
    font-size: clamp(6px, 0.8vw, 10px); /* Increased font size */
    padding: clamp(2px, 0.3vw, 4px) clamp(3px, 0.5vw, 5px); /* Increased padding */
    z-index: 10; /* Above card name */
}

/* Legend cards - price at top-right */
.screenshot-legend-group .screenshot-card-item-small .screenshot-card-price {
    bottom: auto; /* Remove bottom positioning */
    top: clamp(4px, 0.5vw, 6px); /* Position at top */
    left: auto; /* Remove left positioning */
    right: clamp(4px, 0.5vw, 6px); /* Position at right */
    z-index: 10 !important; /* Above card name */
}

/* Battlefield cards - rotated 90deg clockwise
   After rotation: original left = new top, original top = new right, original right = new bottom, original bottom = new left
   Set code should be rotated 180deg and span the full height on the left side of the card
   Price should be rotated 180deg and positioned below the set code on the left side */
.screenshot-battlefield-group .screenshot-card-item-small.screenshot-card-battlefield .screenshot-card-name,
.screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-name {
    bottom: auto !important; /* Remove bottom positioning */
    top: 0 !important; /* Start from top */
    left: clamp(4px, 0.5vw, 6px) !important; /* Position on left side */
    right: auto !important; /* Remove right positioning */
    width: auto !important; /* Auto width */
    height: 100% !important; /* Span full height */
    text-align: center !important; /* Center the text */
    z-index: 11 !important; /* Below price (z-index: 12) */
    transform: rotate(180deg) !important; /* Rotate 180 degrees for correct orientation */
    writing-mode: vertical-rl; /* Vertical text to span the height */
    text-orientation: mixed; /* Keep text orientation natural */
}

.screenshot-battlefield-group .screenshot-card-item-small.screenshot-card-battlefield .screenshot-card-price,
.screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-price {
    bottom: auto !important; /* Remove bottom positioning */
    top: clamp(20px, 2.5vw, 30px) !important; /* Position below set code */
    left: clamp(15px, 2vw, 25px) !important; /* Position slightly back (reduced from 20px) */
    right: auto !important; /* Remove right positioning */
    transform: rotate(-90deg) !important; /* Rotate -90 degrees (counter-clockwise) */
    z-index: 12 !important; /* Above card name (z-index: 11) */
}

.screenshot-card-item-small .screenshot-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: clamp(5px, 0.6vw, 7px);
    padding: clamp(2px, 0.3vw, 4px);
    z-index: 9; /* Below price (z-index: 10) */
}

/* Larger text for legend, rune, and battlefield card names */
.screenshot-legend-group .screenshot-card-item-small .screenshot-card-name,
.screenshot-rune-group .screenshot-card-item-small .screenshot-card-name,
.screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-name {
    font-size: clamp(8px, 1vw, 12px) !important; /* Larger font size */
    padding: clamp(3px, 0.4vw, 5px) !important; /* Increased padding */
    font-weight: 700 !important; /* Make it bolder */
}

.screenshot-qr-inline {
    margin: 0;
    z-index: 10;
    flex-shrink: 0;
    align-self: flex-start;
    height: 220px; /* Increased to match special cards height */
    min-height: 220px; /* Hard-coded min */
    max-height: 220px; /* Hard-coded max */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px; /* Increased size */
    min-width: 220px; /* Hard-coded min */
    max-width: 220px; /* Hard-coded max */
}

.screenshot-stat-primary {
    font-size: 28px;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.screenshot-stat-secondary {
    font-size: 20px;
    color: #00b337;
    font-weight: 600;
    margin-top: 5px;
}

.screenshot-deck-section {
    position: relative;
    margin-bottom: 12px;
    flex-shrink: 0;
    padding-top: 18px; /* Add space for tab */
    overflow: visible;
}

.screenshot-deck-section:not(:first-child) {
    margin-top: 20px; /* Add spacing between main deck and sideboard sections */
}

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

.screenshot-section-tab {
    position: absolute;
    top: -16px;
    left: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 16px;
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    white-space: nowrap;
    overflow: visible;
    min-width: fit-content;
    width: auto;
    pointer-events: none;
}

.screenshot-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding: 18px 8px 8px 8px;
    padding-top: 22px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: none;
    overflow: visible;
}

.screenshot-card-item {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

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

/* Override hover effect for battlefield cards to maintain rotation */
.screenshot-battlefield-group .screenshot-card-item-small:hover {
    transform: rotate(90deg) !important; /* Keep rotated, ignore translateY */
}

.screenshot-card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 63/88;
    overflow: hidden;
    transform: scale(1);
    transform-origin: center;
}

.screenshot-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full card, don't crop */
    display: block;
}

.screenshot-card-quantity {
    position: absolute;
    top: clamp(6px, 0.8vw, 10px);
    right: clamp(6px, 0.8vw, 10px);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.6vw, 6px);
    border-radius: 8px;
    font-size: clamp(7px, 0.8vw, 10px);
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    min-width: clamp(16px, 2vw, 22px);
    text-align: center;
    z-index: 10;
}

.screenshot-card-price {
    position: absolute;
    bottom: clamp(20px, 2.5vw, 30px); /* Position above card name */
    left: clamp(6px, 0.8vw, 10px);
    background: rgba(0, 179, 55, 0.9);
    color: white;
    padding: clamp(3px, 0.4vw, 5px) clamp(5px, 0.6vw, 7px); /* Increased padding */
    border-radius: 4px;
    font-size: clamp(8px, 1vw, 12px); /* Increased font size */
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 10; /* Above card name */
}

.screenshot-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: clamp(6px, 0.8vw, 10px);
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screenshot-download-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10002;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    pointer-events: auto;
}

.screenshot-download-controls.fade-out {
    opacity: 0;
    /* Don't use pointer-events: none - it prevents children from receiving clicks */
    /* Instead, buttons will handle their own visibility and clickability */
}

/* Buttons must always be clickable, even when parent is faded */
.screenshot-download-controls.fade-out .screenshot-btn,
.screenshot-download-controls .screenshot-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.screenshot-download-controls.fade-in {
    opacity: 1;
    pointer-events: auto; /* Ensure clicks work when faded in */
}

/* Ensure buttons are always clickable when controls are visible */
.screenshot-download-controls:not(.fade-out) .screenshot-btn {
    pointer-events: auto !important;
}

.screenshot-download-controls[style*="display: flex"] .screenshot-btn {
    pointer-events: auto !important;
}

.screenshot-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
    pointer-events: auto !important; /* Always allow clicks on buttons */
    position: relative;
    z-index: 10003; /* Higher than controls to ensure clicks work */
}

.screenshot-btn:hover {
    transform: translateY(-2px);
}

.screenshot-btn-primary {
    background: linear-gradient(45deg, #00b337, #e4007c);
    color: white;
}

.screenshot-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Main Content Layout */
.screenshot-main-content {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.screenshot-charts-wrapper {
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.screenshot-deck-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding-top: 20px; /* Allow space for tabs */
}

/* Screenshot Charts Section */
.screenshot-charts-section {
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    flex: 1;
}

.screenshot-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(8px, 1vw, 12px);
    min-height: 0;
    padding: clamp(3px, 0.4vw, 5px);
    height: 100%;
    flex: 1;
    width: 100%;
}

.screenshot-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(6px, 0.8vw, 8px);
    padding-bottom: clamp(4px, 0.5vw, 6px);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 0;
    min-height: 0;
    height: 100%;
    justify-content: flex-start;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.screenshot-chart-label {
    font-size: clamp(11px, 1.5vw, 14px);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1vw, 10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
    border-radius: 4px;
    margin-bottom: clamp(4px, 0.5vw, 6px);
    width: 100%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.screenshot-chart-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    padding: clamp(2px, 0.3vw, 4px);
    margin: 0;
    display: block;
    flex: 1;
    min-height: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Canvas elements for interactive charts */
.screenshot-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    padding: clamp(2px, 0.3vw, 4px);
    margin: 0;
    display: block;
    flex: 1;
    min-height: 0;
}

/* QR Code Section */
.screenshot-qr-section {
    margin-top: 30px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.screenshot-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.screenshot-qr-label {
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.screenshot-qr-code {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: white;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.screenshot-qr-url {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    word-break: break-all;
    max-width: 250px;
    font-family: monospace;
}

.screenshot-qr-code-inline {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: white;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Responsive Screenshot Modal */
@media (max-width: 768px) {
    .screenshot-modal-content {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        padding: 12px;
        border-radius: 0;
    }
    
    .screenshot-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        min-height: auto;
    }
    
    .screenshot-branding {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
    }
    
    .screenshot-logo-img {
        width: 60px;
        height: 60px;
        min-width: 60px;
        max-width: 60px;
    }
    
    .screenshot-brand-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .screenshot-brand-text h1 {
        font-size: 18px;
        white-space: normal;
        word-break: break-word;
    }
    
    .screenshot-brand-text p {
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
    }
    
    .screenshot-made-on {
        font-size: 10px !important;
        white-space: normal !important;
    }
    
    /* Header special cards - stack vertically on mobile */
    .screenshot-header-special-cards {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        margin-left: 0;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }
    
    .screenshot-special-cards-container {
        width: 100%;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    
    .screenshot-legend-group {
        height: auto;
        width: 100%;
        align-items: center;
    }
    
    .screenshot-legend-group .screenshot-card-item-small {
        height: 180px;
        max-width: 120px;
        width: 120px;
    }
    
    .screenshot-special-cards-middle {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 12px;
        align-items: center;
    }
    
    .screenshot-rune-group {
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
    }
    
    .screenshot-rune-group .screenshot-card-item-small {
        height: 100px;
        max-width: 70px;
        width: 70px;
    }
    
    .screenshot-battlefield-group {
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
    }
    
    .screenshot-battlefield-group .screenshot-card-item-small {
        width: 100px;
        height: 140px;
        max-width: 100px;
        min-width: 100px;
    }
    
    .screenshot-battlefield-group .screenshot-special-cards-grid {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .screenshot-special-cards-label {
        font-size: 11px;
    }
    
    .screenshot-qr-inline {
        width: 120px;
        height: 120px;
        min-width: 120px;
        max-width: 120px;
        min-height: 120px;
        max-height: 120px;
        margin: 0 auto;
    }
    
    .screenshot-qr-code-inline {
        width: 100%;
        height: 100%;
    }
    
    .screenshot-header-bottom {
        position: static;
        margin-top: 12px;
        align-items: center;
    }
    
    .screenshot-main-stats {
        text-align: center;
        align-items: center;
        width: 100%;
    }
    
    .screenshot-stat-primary {
        font-size: 20px;
    }
    
    .screenshot-stat-secondary {
        font-size: 16px;
    }
    
    /* Deck sections */
    .screenshot-deck-wrapper {
        padding-top: 10px;
    }
    
    .screenshot-deck-section {
        margin-bottom: 20px;
    }
    
    .screenshot-section-tab {
        font-size: 10px;
        padding: 4px 12px;
        left: 8px;
        top: -14px;
    }
    
    .screenshot-deck-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 16px 8px 8px 8px;
        padding-top: 20px;
    }
    
    .screenshot-card-item {
        border-radius: 8px;
    }
    
    .screenshot-card-price {
        font-size: 10px;
        padding: 3px 5px;
        bottom: 18px;
    }
    
    .screenshot-card-item-small .screenshot-card-price {
        font-size: 8px;
        padding: 2px 4px;
        bottom: 16px;
    }
    
    .screenshot-legend-group .screenshot-card-item-small .screenshot-card-price {
        top: 4px;
        right: 4px;
        font-size: 9px;
        padding: 2px 4px;
    }
    
    .screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-price {
        top: 16px;
        left: 12px;
        font-size: 8px;
        padding: 2px 4px;
    }
    
    .screenshot-card-name {
        font-size: 9px;
        padding: 4px;
    }
    
    .screenshot-card-item-small .screenshot-card-name {
        font-size: 7px;
        padding: 2px 3px;
    }
    
    .screenshot-legend-group .screenshot-card-item-small .screenshot-card-name,
    .screenshot-rune-group .screenshot-card-item-small .screenshot-card-name,
    .screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-name {
        font-size: 8px !important;
        padding: 3px !important;
    }
    
    .screenshot-card-quantity {
        font-size: 8px;
        padding: 2px 4px;
        min-width: 14px;
    }
    
    .screenshot-rune-group .screenshot-card-item-small .screenshot-card-quantity {
        font-size: 8px;
        padding: 2px 4px;
        min-width: 16px;
    }
    
    /* Battlefield set code positioning on mobile */
    .screenshot-battlefield-group .screenshot-card-item-small .screenshot-card-name {
        top: 0 !important;
        left: 4px !important;
        height: 100% !important;
        font-size: 7px !important;
    }
    
    /* Charts section */
    .screenshot-charts-section {
        padding: 10px;
    }
    
    .screenshot-charts-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 12px;
        padding: 8px;
    }
    
    .screenshot-chart-container {
        padding: 8px;
        min-height: 200px;
        height: auto;
    }
    
    .screenshot-chart-label {
        font-size: 12px;
        padding: 4px 8px;
        margin-bottom: 4px;
    }
    
    .screenshot-chart-container canvas {
        min-height: 180px;
    }
    
    /* Download controls */
    .screenshot-download-controls {
        position: fixed;
        bottom: 10px;
        right: 10px;
        left: 10px;
        flex-direction: column;
        gap: 8px;
    }
    
    .screenshot-controls-hover-area {
        width: 100% !important;
        height: 100px !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    .screenshot-btn {
        width: 100%;
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .screenshot-qr-code {
        width: 150px;
        height: 150px;
    }
    
    .screenshot-qr-url {
        font-size: 9px;
        max-width: 200px;
    }
    
    /* Card preview panel adjustments for mobile */
    .screenshot-card-preview {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        left: 10px !important;
        right: 10px !important;
        transform: translateY(-50%);
    }
}