.deckview-list-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .deckview-list-controls {
        justify-content: flex-end;
        width: auto;
    }

}

.deck-overview p{
    text-align: left;
}

.deckview-overview-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.deckview-overview-button {
    width: 100%;
}

.deckview-overview-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.deckview-overview-content {
    margin-top: 1rem;
}

.deckview-overview-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-3xl);
}

.deckview-overview-panel-inner {
    position: relative;
    width: 100%;
}

.deckview-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* Threat Index panel on the decklist page */
.deckview-dti-panel {
    position: relative;
}

.deckview-dti-skeleton {
    height: 124px;
    border-radius: var(--dc-radius-2);
}

.deckview-analysis-shell {
    text-align: left;
}

.deckview-analysis-skeleton,
.deckview-skeleton-list {
    display: flex;
    flex-direction: column;
}

.deckview-analysis-skeleton {
    gap: 1rem;
}

.deckview-skeleton-list {
    gap: 0.5rem;
}

.deckview-analysis-content {
    max-width: none;
}

.deckview-analysis-modal-footer {
    --analysis-intelligence-grad-l: #9b8666;
    --analysis-intelligence-grad-r: #ffe1b4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.deckview-analysis-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.33rem;
    min-width: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.deckview-analysis-modal-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #ffe1b4;
    background-clip: text;
    -webkit-background-clip: text;
    flex-shrink: 0;
}

.deckview-analysis-modal-badge-icon .credit-confirm-intelligence-icon-svg {
    width: 100%;
    height: 100%;
    color: inherit;
}

.deckview-analysis-modal-badge-label {
    color: transparent;
    background: linear-gradient(135deg, var(--analysis-intelligence-grad-l), var(--analysis-intelligence-grad-r));
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 600;
}

.deckview-card-vendor-buttons {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.deckview-card-justification {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--dc-layer-raised);
    border-radius: var(--dc-radius-2);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(229 231 235);
    max-width: 28rem;
}

.deckview-button-loading {
    opacity: 0.5;
    cursor: wait;
}

.deckview-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.deckview-color-identity-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.deckview-message-zinc-soft,
.deckview-message-muted-center {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

.deckview-error-state {
    text-align: center;
    color: rgb(248 113 113);
}

.deckview-message-error-text {
    color: rgb(252 165 165);
}

.deckview-message-error-text,
.deckview-message-muted,
.deckview-message-muted-center,
.deckview-message-soft,
.deckview-message-zinc-soft {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.deckview-message-muted,
.deckview-message-muted-center {
    color: rgb(156 163 175);
}

.deckview-message-soft {
    color: rgb(255 255 255 / 0.7);
}

.deckview-message-zinc-soft {
    color: rgb(161 161 170);
}

.deckview-analysis-card-link {
    cursor: pointer;
}

.deckview-analysis-warning-box {
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(254 249 195);
    text-align: center;
    background-color: rgb(113 63 18 / 0.4);
    border: 1px solid rgb(202 138 4 / 0.4);
    border-radius: var(--dc-radius-3);
}

.deckview-roast-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.deckview-roast-loading {
    gap: 0.75rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.deckview-roast-loading-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.deckview-roast-guardrail {
    margin-top: 1rem;
    font-size: 11px;
    color: rgb(255 255 255 / 0.6);
}

.deckview-section-cards-transition {
    transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
    overflow: hidden;
}

.deckview-section-cards-collapsed-height {
    height: 0;
}

.deckview-section-cards-collapsed-fade {
    opacity: 0;
}

.deckview-section-cards-collapsed-hidden {
    visibility: hidden;
    display: none;
}

.deckview-export-textarea {
    width: 100%;
    height: 16rem;
    resize: none;
}

.deckview-card-modal-content {
    text-align: center;
}

.deckview-card-modal-price {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(156 163 175);
}

.deckview-skeleton-line-full {
    width: 100%;
}

.deckview-skeleton-line-five-sixths {
    width: 83.333333%;
}

.deckview-skeleton-line-four-fifths {
    width: 80%;
}

.deckview-skeleton-line-three-quarters {
    width: 75%;
}

.deckview-skeleton-line-two-thirds {
    width: 66.666667%;
}

.deckview-skeleton-line-three-fifths {
    width: 60%;
}

@media (min-width: 768px) {
    .deckview-overview-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .deckview-overview-button {
        width: auto;
    }

}

@media (min-width: 1024px) {
    .deckview-color-identity-icon {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* Buy toolbar at the top of the decklist panel — same .dc-toolbar row as the
   builder's Smart Tools / More Tools bar, with the buy actions riding the
   right edge like the More Tools group. */
#decklistBuyToolbar {
    margin-bottom: var(--spacing-md);
}

#decklistBuyToolbar .dc-toolbar-actions {
    margin-left: auto;
}

/* Decklist meta-bar chips: color pips + creator merged into the meta stack
   (the standalone identity/creator row is gone). Pip and avatar sizes drop
   to chip scale — the base classes stay hero-sized for the legacy deckview
   page. */
.dc-deck-meta-pips {
    gap: 0.2rem;
    /* Image content gets no text line-height — pin to the shared 26px row */
    height: 26px;
}

.dc-deck-meta-pips .deckview-color-identity-icon {
    width: 16px;
    height: 16px;
}

.dc-deck-creator-chip .dc-creator-avatar {
    width: 20px;
    height: 20px;
}

/* Deck title matches the builder's title input 1:1 — same size ladder, metrics
   and trailing space as .dc-input.dc-title-input / .dc-input-container.dc-large
   in builder.css. Overrides the Tailwind text-* utilities on the element. */
#deckTitle.dc-decklist-title {
    font-size: 1.6875rem;
    line-height: 1;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    padding-bottom: calc(var(--spacing-xxs) + 1px);
}

@media (min-width: 640px) {
    #deckTitle.dc-decklist-title {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    #deckTitle.dc-decklist-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    #deckTitle.dc-decklist-title {
        font-size: 4.5rem;
    }
}


/* Benchmark tiles: one raised tile per Threat Index benchmark. The whole
   tile is a button that opens the benchmark detail. */
.dc-dti-tile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    padding: var(--spacing-sm);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    color: var(--dc-color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dc-duration-fast) var(--dc-easing-standard),
                background-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-tile:hover {
    border-color: var(--dc-border-hover);
    background: var(--dc-layer-raised-hover);
}

.dc-dti-tile:focus-visible {
    outline: none;
    border-color: var(--dc-border-focus);
    box-shadow: var(--dc-shadow-focus);
}

.dc-dti-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.dc-dti-tile-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--dc-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-dti-tile-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--dc-color-text-subtle);
    transition: color var(--dc-duration-fast) var(--dc-easing-standard),
                transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-tile:hover .dc-dti-tile-arrow,
.dc-dti-tile:focus-visible .dc-dti-tile-arrow {
    color: var(--dc-color-accent);
    transform: translate(1px, -1px);
}

.dc-dti-tile-score {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xxs);
    font-size: var(--font-size-xxl);
    font-weight: 900;
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    color: var(--dc-color-text);
}

.dc-dti-tile-denom {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    color: var(--dc-color-text-muted);
}

/* Special styling for cost values to handle longer numbers */

/* Mobile button text hiding */
@media (max-width: 639px) {
    .dc-button {
        min-width: auto;
        padding: 8px;
    }
}

#comboSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

/* Combo modal card display - deckview specific overrides */

/* Desktop: cards on left sidebar, details on right */
#dc3MainModalBody .dc-combo-preview {
    flex: 0 0 auto;
    width: 250px;
}

#dc3MainModalBody .dc-combo-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
}

#dc3MainModalBody .dc-combo-cards-grid .dc-combo-card {
    width: 100%;
    height: auto;
    border-radius: var(--dc-radius-card);
    box-shadow: var(--dc-shadow-base);
    transition: transform var(--transition-duration-fast);
    cursor: pointer;
}

#dc3MainModalBody .dc-combo-cards-grid .dc-combo-card:hover {
    transform: scale(1.05);
    z-index: 1;
    position: relative;
}

#dc3MainModalBody .dc-combo-details {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile: cards on top in 2-column grid */
@media (max-width: 768px) {
    #dc3MainModalBody .dc-combo-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        background: var(--dc-layer-raised);
        border-radius: var(--dc-radius-2);
    }

    #dc3MainModalBody .dc-combo-cards-grid .dc-combo-card {
        width: 100%;
    }
}

.combo-spellbook-note {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 0;
    right: 0;
    font-size: var(--font-size-xs);
    color: var(--dc-color-text);
    opacity: 0.50;
    text-align: center;
}

/* In-modal variant: flows after the combo rows instead of pinning to the
   panel bottom. */
.combo-spellbook-note.dc-combo-modal-note {
    position: static;
    margin-top: var(--spacing-md);
}

.dc-combo-modal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-combo-modal-title-logo {
    width: 24px;
    height: 24px;
}

.dc-modal-footer-hidden {
    display: none;
}

.dc-share-link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 1rem;
}

.dc-share-link-anchor {
    color: var(--dc-color-accent);
    word-break: break-all;
    text-align: center;
}

.dc-card-image-container-inline {
    display: inline-block;
}

.dc-tooltip-link-combos {
    color: rgb(255, 149, 149);
}

/* Tooltip styles are in webapp.compiled.css (shared tooltip system) */

/* ===== CARD ENTRY STYLING ===== */
.deckview-card-actions {
    display: flex;
}

.card-entry-list .deckview-card-actions {
    justify-content: flex-end;
    min-width: 28px;
}

.deckview-card-actions .deckview-card-options-btn {
    opacity: 0.65;
}

.card-entry-list:hover .deckview-card-actions .deckview-card-options-btn,
.deckview-card-actions .deckview-card-options-btn:focus-visible {
    opacity: 1;
}

/* Grid: the pill button never dims */
.dc-card-grid-actions .deckview-card-options-btn {
    opacity: 1;
}

.deckview-add-panel-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(100%, 520px);
    margin: 0 auto;
}

.deckview-add-panel-card {
    display: flex;
    justify-content: center;
    width: min(300px, 100%);
    margin: 0 auto 6px;
}

.deckview-add-panel-field,
.deckview-add-panel-destination {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deckview-add-panel-toggle-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}

@media (max-width: 767px) {
    .deckview-add-panel-card {
        margin-bottom: 2px;
    }
}

/* Card grid entry */
/* Card layouts render underneath the shared loading spinner until the critical
   images have decoded. Grid/stacked switches that reuse the existing image
   nodes only suppress geometry transitions for two settling frames. */
#decklistContent.is-render-preparing,
#decklistConsideringContent.is-render-preparing {
    position: relative;
    isolation: isolate;
}

#decklistContent.is-render-preparing > *,
#decklistConsideringContent.is-render-preparing > * {
    visibility: hidden;
}

#decklistContent.is-render-preparing::after,
#decklistConsideringContent.is-render-preparing::after {
    content: '';
    position: absolute;
    top: 184px;
    left: calc(50% - 16.5px);
    z-index: 21;
    width: 33px;
    height: 33px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

#decklistContent .dc-card-image:not(.is-image-ready),
#decklistConsideringContent .dc-card-image:not(.is-image-ready) {
    opacity: 0 !important;
}

#decklistContent .dc-card-image.is-image-ready,
#decklistConsideringContent .dc-card-image.is-image-ready {
    opacity: 1;
}

#decklistContent.is-view-switching .deckview-section-cards-transition,
#decklistContent.is-view-switching .dc-card-entry-grid,
#decklistContent.is-view-switching .dc-card-entry-stacked,
#decklistConsideringContent.is-view-switching .deckview-section-cards-transition,
#decklistConsideringContent.is-view-switching .dc-card-entry-grid,
#decklistConsideringContent.is-view-switching .dc-card-entry-stacked {
    transition: none !important;
}

.deckview-section-cards {
    overflow: hidden;
}

@media (max-width: 767px) {
    
    .dc-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}


.grid-view .dc-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ===== TYPE SECTIONS ===== */
.dc-type-section {
    margin-bottom: 0;
    /* skip style/layout/paint for offscreen deck sections (~100-card decks
       render all sections at once) */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Stacked View overlaps cards with negative margins. A content-visibility
   calculation made before that geometry settles can leave cards skipped and
   blank until the next resize. Render stacked sections and cards immediately;
   list/grid keep the optimization. (Same fix as builder.css, at all widths.) */
.stacked-view .dc-type-section,
.stacked-view .dc-card-entry-stacked {
    content-visibility: visible;
}

/* Starting Hand Panel */
.deckview-card-preview {
    position: fixed;
    z-index: 950;
    padding: 10px;
    display: none;
    max-width: 250px;
    pointer-events: none;
}

.deckview-card-preview.is-visible {
    display: block;
}

.tooltip-container.deckview-tooltip-measuring {
    visibility: hidden;
    transform: none;
}

.tooltip-container.deckview-tooltip-visible {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* Creator Row */
.dc-creator-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.dc-creator-row:hover {
    opacity: 0.8;
}

.dc-creator-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.dc-creator-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-creator-avatar-placeholder {
    width: 60%;
    height: 60%;
    color: var(--dc-color-text-muted);
}

.dc-creator-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* Decklist Considering Panel */
#decklistConsideringSection {
    margin-top: var(--spacing-3xl);
}