/* ============================================
   SHARED COMPONENTS
   Reusable patterns consolidated for consistency
   ============================================ */

/* ============================================
   UNAVAILABLE BUTTON STATE
   Applied when a button exists but its action is
   currently blocked (empty deck, not signed in, not owner).
   The element stays clickable so it can show a feedback toast.
   ============================================ */
.btn-unavailable {
    opacity: 0.38;
    cursor: not-allowed !important;
}

.btn-unavailable:hover {
    filter: none !important;
    opacity: 0.38 !important;
    transform: none !important;
}

/* ============================================
   GLASS PANEL - Used across all panels
   ============================================ */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CARD PREVIEW - Shared across Deck, Stats, Genome
   Unified sticky preview card styling
   ============================================ */
.card-preview-container {
    position: relative;
    aspect-ratio: 488 / 680;
}

.card-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}

.card-preview-placeholder {
    width: 100%;
    height: 100%;
    background: var(--entry-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85em;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
}

/* ============================================
   CARD HOVER POPUP - Shared across card displays
   Fixed position preview on hover
   ============================================ */
.card-hover-popup {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.card-hover-popup img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Alias for deck entry previews */
.deck-entry-preview {
    position: fixed;
    right: calc(400px + 280px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.deck-entry-preview img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Synergy card preview */
.synergy-card-preview {
    position: fixed;
    right: calc(400px + 280px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.synergy-card-preview img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Enlarged preview overlay (on hover of deck preview) */
.enlarged-preview-overlay {
    position: fixed;
    transform: translate(-50%, 0);
    z-index: 10000;
    pointer-events: auto;
}

.enlarged-preview-image {
    max-width: 400px;
    max-height: 560px;
    border-radius: 4.75% / 3.5%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
}

/* ============================================
   SCROLLABLE LIST CONTAINER
   Shared across deck list, search results, library
   ============================================ */
.scrollable-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Deck list specific */
.deck-list-scrollable {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    height: auto;
    /* Respect siblings in flex column */
}

@media (max-width: 768px) {
    .scrollable-list,
    .deck-list-scrollable {
        overflow-y: visible !important;
        height: auto !important;
        flex: none !important;
    }
}

/* ============================================
   SYNERGY ITEM - Shared synergy display
   Used in Stats panel and Genome info panel
   ============================================ */
.synergy-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--input-bg);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    border: 1px solid transparent;
}

.synergy-item:hover {
    background: var(--input-bg);
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.synergy-item.expanded {
    background: var(--accent-bg-subtle);
    border-left: 3px solid var(--accent-color);
}

.synergy-item.clickable {
    cursor: pointer;
    user-select: none;
}

.synergy-item.clickable:hover {
    background: var(--input-bg);
    border-color: var(--accent-color);
}

.synergy-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
}

.synergy-card-name {
    font-size: 0.8em;
    color: var(--text-color);
}

.synergy-badge {
    background: var(--accent-color);
    color: var(--bg-color);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
}

.synergy-reason {
    padding: 8px 12px;
    margin-top: 4px;
    margin-left: 18px;
    background: var(--widget-bg);
    border-left: 2px solid var(--accent-hover);
    border-radius: 4px;
    font-size: 0.75em;
    color: var(--text-secondary);
    line-height: 1.4;
}

.synergy-expand-icon {
    width: 16px;
    font-size: 0.7em;
    color: var(--text-muted);
    margin-right: 8px;
}

.synergy-details {
    margin-left: 24px;
    padding: 8px 0;
    border-left: 2px solid var(--accent-bg-hover);
    margin-top: 4px;
}

/* ============================================
   CARD DETAIL PANEL
   Reusable component for card synergies with hover preview
   ============================================ */
.card-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--widget-bg);
    border-radius: 8px;
    padding: 15px;
}

.card-detail-layout-horizontal {
    display: flex;
    gap: 20px;
}

.card-detail-list-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.synergy-items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================
   MANA SYMBOLS
   Shared mana symbol display
   ============================================ */
.mana-symbol {
    width: 16px;
    height: 16px;
}

.mana-symbol-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.4;
    filter: grayscale(100%) brightness(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mana-symbol-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.mana-symbol-btn:hover {
    opacity: 0.8;
    filter: grayscale(30%) brightness(1);
    transform: scale(1.1);
}

.mana-symbol-btn.active {
    opacity: 1;
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.15);
    z-index: 10;
}

.mana-symbol-btn.active img {
    box-shadow: 0 0 15px var(--accent-glow);
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-text {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
}

.placeholder-text {
    color: #666;
    font-style: italic;
    margin: 8px 0;
    text-align: center;
}

.no-results {
    text-align: center;
    color: #666;
    padding: 40px;
}

.no-selection {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
    border: 1px dashed #444;
    border-radius: 8px;
}

/* ============================================
   BADGE COMPONENTS
   ============================================ */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.badge.free {
    background: #e0e0e0;
    color: #333;
}

.badge.pro {
    background: gold;
    color: black;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* ============================================
   SYNERGY COLOR PALETTE
   ============================================ */
.color-1 {
    color: #4db8ff;
    border-left: 3px solid #4db8ff;
    background: linear-gradient(90deg, rgba(77, 184, 255, 0.1), transparent);
}

.color-2 {
    color: #50fa7b;
    border-left: 3px solid #50fa7b;
    background: linear-gradient(90deg, rgba(80, 250, 123, 0.1), transparent);
}

.color-3 {
    color: #ff79c6;
    border-left: 3px solid #ff79c6;
    background: linear-gradient(90deg, rgba(255, 121, 198, 0.1), transparent);
}

.color-4 {
    color: #f1fa8c;
    border-left: 3px solid #f1fa8c;
    background: linear-gradient(90deg, rgba(241, 250, 140, 0.1), transparent);
}

.color-5 {
    color: #bd93f9;
    border-left: 3px solid #bd93f9;
    background: linear-gradient(90deg, rgba(189, 147, 249, 0.1), transparent);
}

/* ============================================
   VIRTUAL LIST - Efficient windowed scrolling
   ============================================ */
.virtual-list {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.virtual-list-item {
    box-sizing: border-box;
    width: 100%;
}

/* Grid variant for card grids */
.virtual-grid {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.virtual-grid-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    gap: 16px;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ============================================
   STATUS INDICATORS
   ============================================ */
.status-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.status-indicator:not(:empty) {
    display: inline-block;
}

.status-indicator[data-state="ready"] {
    color: #50fa7b;
    border-color: rgba(80, 250, 123, 0.3);
}

.status-indicator[data-state="processing"] {
    color: #f1fa8c;
    border-color: rgba(241, 250, 140, 0.3);
}

/* ============================================
   ENTRY CHIP — shared keyword/glossary chip
   Used by GlossaryEntryCard for category badges
   and see-also links in both the card modal and
   the glossary panel.
   ============================================ */
button.entry-chip {
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

button.entry-chip:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

button.entry-chip:active {
    transform: translateY(0);
}

.status-indicator[data-state="error"] {
    color: #ff5555;
    border-color: rgba(255, 85, 85, 0.3);
}

/* ============================================
   PAGINATION NAVIGATION
   ============================================ */
.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px;
}

.pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: var(--accent-bg);
}

.pagination-btn.active {
    border: none;
    background: var(--accent-gradient);
    color: white;
    font-weight: 600;
}

.pagination-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-ellipsis {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 0 4px;
    user-select: none;
}

@media (max-width: 768px) {
    .pagination-pages {
        gap: 4px;
        margin: 0 2px;
    }

    .pagination-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        font-size: 11px;
    }

    .pagination-ellipsis {
        font-size: 12px;
        padding: 0 2px;
    }
}

/* ── Reusable SortControl (field dropdown + asc/desc toggle) ──────────────── */
.sort-control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.sort-control-select {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    padding: 0 10px;
    font-size: 0.9em;
    cursor: pointer;
}

.sort-control-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}

/* Direction toggle reuses the .advanced-toggle-group / .toggle-btn pill style, sized to
   its short Asc/Desc labels rather than the wider Cost/Identity ones. */
.sort-direction-toggle {
    flex: 0 0 auto;
}

.sort-direction-toggle .toggle-btn {
    min-width: 40px;
    padding: 2px 10px;
}

/* Keep the deck toolbar variants aligned with the other 38px-tall controls. */
.deck-toolbar-container .sort-control-select {
    height: 38px;
    box-sizing: border-box;
}

.deck-toolbar-container .sort-direction-toggle {
    height: 38px;
}

/* ============================================
   Shared hollow pie (donut) chart
   (DonutChart — Deckbuilder Stats + Collection)
   ============================================ */

.donut-chart-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.donut-pie {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle at center, transparent 45%, #000 46%);
    mask: radial-gradient(circle at center, transparent 45%, #000 46%);
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.donut-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.donut-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.donut-key {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

.donut-legend b {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
/* Combo outcomes sit below the piece images now: the reader identifies the
   combo from its cards first, and "what it does" answers that rather than
   heading it. Grouped and labelled so the tags read as a set of results rather
   than loose metadata floating above the widget. */
.combo-outcomes {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 5%, var(--card-bg));
}

.combo-outcomes-title {
    margin-bottom: 7px;
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.combo-outcomes .combo-produces-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

/* Outcomes read as a list, not a row of badges.

   Badges suited one- or two-word tags, but an outcome is a short sentence
   ("Infinite colorless mana", "Each opponent loses the game"). Wrapped into
   pills they broke mid-phrase and looked like metadata rather than the result
   the combo produces. */
.combo-outcomes-list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.combo-outcomes-list li {
    margin: 0 0 4px 0;
    line-height: 1.45;
}

.combo-outcomes-list li:last-child {
    margin-bottom: 0;
}

/* Outcomes beside the walkthrough when the panel is wide enough.

   They answer different questions — "what do I get" and "how do I get it" — and
   stacking them pushed the steps below the fold on a desktop panel that had
   room to spare. The walkthrough gets the larger share because its lines are
   longer. Single column by default so the narrow case needs no override; the
   breakpoint is on the panel's own width, not the viewport's, because this
   widget also renders inside a half-width Explore column. */
.combo-details-host {
    container-type: inline-size;
    container-name: combo-details-host;
}

.combo-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@container combo-details-host (min-width: 860px) {
    .combo-details {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    }
}

/* Fallback for browsers without container queries: use the viewport instead.
   Slightly conservative so a wide viewport with a narrow panel does not get a
   cramped two-column split. */
@supports not (container-type: inline-size) {
    @media (min-width: 1400px) {
        .combo-details {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        }
    }
}

.combo-walkthrough {
    min-width: 0;
}

/* The outcomes box already carries a border; the walkthrough sits beside it as
   plain content, so it gets matching vertical rhythm without a second frame. */
.combo-details .combo-outcomes {
    margin: 0;
}

.combo-details .combo-steps {
    margin-top: 6px;
}

/* Step 0 is the assumed board state. Keep it outside the action counter so the
   first actual combo action remains step 1; its requirements are lettered A/B/C. */
.combo-steps > li.combo-prerequisite-step {
    align-items: flex-start;
    counter-increment: none;
}

.combo-steps > li.combo-prerequisite-step::before {
    content: "0";
}

.combo-prerequisite-card {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent-color);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.combo-prerequisite-label {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.combo-prerequisite-substeps {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: combo-prerequisite;
}

.combo-prerequisite-substeps > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 22px;
    counter-increment: combo-prerequisite;
}

.combo-prerequisite-substeps > li::before {
    content: counter(combo-prerequisite, upper-alpha);
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 70%, white);
    border-radius: 50%;
    background: var(--widget-bg);
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 800;
}

.combo-prerequisites {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 8%, var(--card-bg));
}

.combo-prerequisites-title {
    margin-bottom: 6px;
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.combo-prerequisites ul {
    margin: 0;
    padding-left: 1.25rem;
}

.combo-prerequisites li + li {
    margin-top: 5px;
}

/* Canonical user-authored text control shared by the main and admin apps. */
.standard-text-field {
    /* Anchor for the counter, which sits inside the input's box. */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.image-picker-search-field,
.share-url-field,
.settings-email-field,
.billing-referral-link-field {
    flex: 1 1 auto;
}

.standard-text-field > input,
.standard-text-field > textarea {
    box-sizing: border-box;
    max-width: 100%;
}

/* Inside the input, pinned bottom-right, rather than on a line of its own below. The line
   below is what caused the trouble: every counted field was one counter taller than the
   controls beside it, and half a dozen layouts grew compensation rules to re-align rows that
   had stopped lining up. Inside the box it occupies no layout space at all. Small enough to
   sit under the input's text without colliding with it, and click-through so it never steals
   a click aimed at the field. */
.standard-text-field-count {
    position: absolute;
    right: 10px;
    bottom: 1px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    opacity: 0.8;
}
.card-autocomplete-input-row {
    /* The counter now lives inside the field's box and adds no height below it. */
    --standard-field-counter-offset: 0px;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.card-autocomplete-clear {
    position: absolute;
    top: 0;
    bottom: var(--standard-field-counter-offset);
    right: 92px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.card-autocomplete .btn-search-explicit {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 0;
    margin-bottom: var(--standard-field-counter-offset);
    padding: 0 12px;
    border: 0;
    border-radius: 0 4px 4px 0;
    background: var(--ui-button-active-bg, var(--accent-gradient));
    color: white;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.card-autocomplete .btn-search-explicit:hover,
.card-autocomplete .btn-search-explicit:focus,
.card-autocomplete .btn-search-explicit:focus-visible {
    box-shadow: none !important;
}

/* Shared deck-card artwork behavior used by Home, Library, Favorites, and Discover. */
.deck-card-widget {
    container-type: inline-size;
}

.deck-card-commanders {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 4px;
}

.deck-card-commander-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: var(--accent-color);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.deck-card-commander-title,
.deck-card-commander-subtitle {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card-commander-subtitle {
    color: var(--text-muted);
    font-size: 0.82em;
    font-style: italic;
    font-weight: 500;
}

.deck-card-commander-link:hover,
.deck-card-commander-link:focus-visible {
    color: color-mix(in srgb, var(--accent-color) 72%, white);
    text-decoration: underline;
}

.deck-card-commander-link:focus-visible {
    outline: 1px solid var(--accent-color);
    outline-offset: 2px;
}

.deck-card-commanders-ampersand {
    display: none;
    align-self: center;
    color: white;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

@container (min-width: 280px) {
    .deck-card-commanders-paired {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .deck-card-commanders-paired .deck-card-commanders-ampersand {
        display: block;
    }

    .deck-card-commander-partner {
        align-items: flex-end;
        text-align: right;
    }
}

.deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.deck-card-image-split {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.deck-card-image-pane {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.deck-card-image-pane-primary {
    -webkit-mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
}

.deck-card-image-pane-secondary {
    -webkit-mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
}

/* Each source gets its own side-centered viewport. The extra 20% covers the
   diagonal overlap while placing the image centers at 25% and 75% of the
   overall widget instead of at the shared 50% midpoint. */
.deck-card-image-pane .deck-card-image {
    position: absolute;
    top: 0;
    width: 70%;
    height: 100%;
    object-position: center;
}

.deck-card-image-pane-primary .deck-card-image {
    right: 40%;
}

.deck-card-image-pane-secondary .deck-card-image {
    left: 40%;
}

.deck-card-image-split::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent calc(50% - 0.75px),
        rgba(255, 255, 255, 0.55) calc(50% - 0.75px),
        rgba(255, 255, 255, 0.55) calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}

.deck-card-widget:hover .deck-card-image {
    transform: scale(1.05);
    opacity: 1;
}

/* Card zoom control, shown beside the view-mode toggle on the views that draw card
   previews. Hidden in List view, which has no preview to resize. */
.toolbar-card-scale {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.toolbar-card-scale-value {
    min-width: 3.2em;
    text-align: center;
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    user-select: none;
}

.toolbar-card-scale .toolbar-view-btn:disabled {
    opacity: 0.4;
    cursor: default;
}