/* ============================================
   DECK PANEL
   Deck header, entries, controls, stack/grid views
   ============================================ */

/* Background art — set via --deck-art-url on the element */
.deckbuilder-container,
.library-panel,
.games-panel,
.collection-panel,
.pod-panel {
    background-image:
        linear-gradient(
            to bottom,
            var(--bg-color) 0%,
            var(--bg-color) 18%,
            color-mix(in srgb, var(--bg-color) 65%, transparent) 35%,
            color-mix(in srgb, var(--bg-color) 50%, transparent) 50%,
            color-mix(in srgb, var(--bg-color) 70%, transparent) 68%,
            var(--bg-color) 88%
        ),
        var(--deck-art-url, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Deck Content Wrapper */
.deck-content-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    /* Remove height: 100% and overflow: hidden so .deck-panel can scroll naturally */
    min-height: 0;
    width: 100%;
}

.deckbuilder-subtab-content {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.toolbar-btn {
    width: 100%;
    text-shadow: none !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.collapse-controls-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8em;
    font-style: italic;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.collapse-controls-btn:hover {
    color: var(--accent-hover);
    background: transparent;
}

/* Format Selector */
.format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--widget-bg);
    border-radius: 8px;
    margin-bottom: 10px;
}

.format-label {
    color: var(--text-muted);
    font-size: 0.9em;
}

.format-selector {
    flex: 1;
}

.deck-name-input {
    width: 100%;
    min-width: 0;
    background: var(--input-bg);
    border: 1px solid var(--input-border, var(--border-color));
    border-radius: 6px;
    color: var(--text-color);
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
}

.deck-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.deck-name-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* A viewer who cannot rename the deck still sees the name; it just stops looking editable. */
.deck-name-input:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
    opacity: 1;
    cursor: default;
}

/* The resting state of the deck name: a title, not a form field. Clicking it swaps in
   the input above; the hover underline is the rename affordance. */
.deck-title {
    display: block;
    padding: 0 2px;
    border: none;
    background: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1.15em;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.deck-title:hover,
.deck-title:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--text-muted);
    text-underline-offset: 4px;
}

/* Viewers who cannot rename get the title without the affordance. */
.deck-title-static,
.deck-title-static:hover {
    cursor: default;
    text-decoration: none;
}

/* The command zone's identity pips, promoted to sit before the deck title: they
   describe the whole deck, and up here they read as part of its name. */
.deck-title-pips {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.deck-title-pips .command-zone-identity-symbol {
    width: 18px;
    height: 18px;
}

.toolbar-divider {
    width: 1px;
    height: 22px;
    flex-shrink: 0;
    margin: 0 3px;
    background: var(--border-color);
}

.deck-save-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.deck-save-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.deck-save-btn.dirty::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--warning-color, #f5a524);
    border: 2px solid var(--widget-bg);
}

/* Deck Preview Column */
.deck-preview-column {
    flex-shrink: 0;
    width: 33%;
    min-width: 120px;
    max-width: 220px;
    aspect-ratio: 488 / 680;
    position: relative;
}

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

.deck-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;
}

.commander-crown {
    position: absolute;
    top: -6px;
    left: 4px;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Commander/Partner toggle button */
.crown-btn {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.5;
    /* Increased base opacity */
    transition: opacity 0.2s, transform 0.2s;
    color: var(--text-muted);
    /* Use theme-aware muted color */
}

.crown-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.crown-btn.active {
    opacity: 1;
    color: var(--warning-color);
    filter: drop-shadow(0 0 2px var(--warning-color));
}

.crown-placeholder {
    width: 22px;
    display: inline-block;
}

.companion-placeholder {
    width: 22px;
    display: inline-block;
}

.entry-role-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 50px;
    width: 50px;
}

/* Companion toggle button */
.companion-btn {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.5;
    /* Increased base opacity */
    transition: opacity 0.2s, transform 0.2s;
    color: var(--text-muted);
    /* Use theme-aware muted color */
}

.companion-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.companion-btn.active {
    opacity: 1;
    color: var(--type-enchantment);
    filter: drop-shadow(0 0 3px var(--type-enchantment));
}

/* Deck Controls */
.deck-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    gap: 8px;
    min-width: 0;
    padding: 10px 0;
}

.deck-controls-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deck-search-row {
    width: 100%;
}

.deck-search-input {
    width: 100%;
    padding: 8px 12px;
}

.deck-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deck-sort-label {
    color: var(--text-muted);
    font-size: 0.85em;
}

.deck-sort-dropdown {
    flex: 1;
}

/* Renamed to avoid conflicts */
.deck-action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    /* Increasing gap slightly */
    margin-top: auto;
    width: 100%;
}

.deck-action-grid>button {
    /* Resetting width constraints */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    /* Internal layout */
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    height: 100%;

    /* overriding forms.css flex:1 if present */
    flex: none !important;
}

/* Preserve base visual styles from classes but override layout */
.deck-action-grid .action-btn {
    font-size: 0.8em;
}

/* Deck List */
.deck-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    margin-bottom: 20px;
    padding-right: 6px;
    box-sizing: border-box;
    padding-bottom: 40px;
    /* Spacing before footer */
}

/* Grouped Deck List */
.deck-list-grouped {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.deck-group {
    background: var(--widget-bg);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.deck-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--deck-header-bg);
    color: var(--deck-header-text);
    font-size: 0.85em;
    font-weight: 600;
    border-bottom: 1px solid var(--deck-header-border);
}

.group-label {
    flex: 1;
}

.group-badge {
    background: var(--deck-header-border);
    color: var(--button-primary-text, white);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 500;
}

/* Physical location hierarchy */
.location-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.deck-stack-view > .location-tree {
    flex: 1 1 100%;
}

.location-tree-node {
    --location-depth: 0;
    --location-shell-pad: 6px;
    --location-header-indent: 10px;
    --location-header-offset: -6px;
    --location-border-strength: 22%;
    --location-header-strength: 11%;
    --location-header-border-strength: 24%;
    --location-bg-strength: 5%;
    --location-rail-strength: 42%;
    --location-font-size: 0.9rem;
    --location-accent: color-mix(in srgb, var(--accent-color) 60%, #6fd1ff);
    box-sizing: border-box;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--location-accent) var(--location-border-strength), var(--border-color));
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--location-accent) var(--location-bg-strength), transparent),
            color-mix(in srgb, var(--widget-bg) 88%, transparent)
        );
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--location-accent) var(--location-rail-strength), transparent);
    padding: 0 0 6px var(--location-shell-pad);
}

.location-tree-node .location-tree-node {
    margin-top: 8px;
}

.location-tree-header {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-left: var(--location-header-offset);
    padding: 7px 10px 7px var(--location-header-indent);
    border-bottom: 1px solid color-mix(in srgb, var(--location-accent) var(--location-header-border-strength), var(--border-color));
    border-radius: 7px 7px 0 0;
    background: color-mix(in srgb, var(--location-accent) var(--location-header-strength), var(--deck-header-bg));
    color: var(--deck-header-text);
    font-weight: 750;
    font-size: var(--location-font-size);
}

.location-tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-tree-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--location-accent) 38%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--button-bg) 86%, var(--location-accent));
    color: var(--text-color);
    font-size: 0.78rem;
    text-align: center;
}

.location-tree-body {
    padding: 8px 6px 0 0;
}

.location-list-tree {
    gap: 10px;
}

.location-list-node > .location-tree-body > .deck-entry:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.location-list-node > .location-tree-body > .deck-entry:last-of-type {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.location-grid-tree {
    gap: 14px;
}

.location-grid-cards {
    margin-bottom: 2px;
}

.location-stack-tree {
    gap: 14px;
}

.location-stack-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--stack-pile-gap);
}

.location-stack-card {
    flex: 0 0 var(--stack-pile-width);
    width: var(--stack-pile-width);
}

.location-tree-unassigned {
    --location-accent: color-mix(in srgb, var(--text-muted) 54%, var(--accent-color));
}

@media (max-width: 768px) {
    .location-tree {
        gap: 8px;
    }

    .location-tree-node {
        --location-shell-pad: 4px;
        --location-header-offset: -4px;
        padding-left: var(--location-shell-pad);
    }

    .location-tree-node .location-tree-node {
        margin-top: 6px;
    }

    .location-tree-header {
        min-height: 30px;
        padding: 6px 8px 6px var(--location-header-indent);
    }

    .location-tree-body {
        padding: 6px 4px 0 0;
    }
}

/* Zone Header (Top-level Deck/Sideboard sections). One 8 px rhythm: the command
   bar's bottom margin is 8 px, every zone after the first sits 8 px below the
   previous one, and every zone header sits 8 px above its first entry, whatever
   the view mode. The first zone adds nothing of its own, so the bar-to-zone gap
   equals the zone-to-zone gap. */
.deck-list-scrollable > .deck-list-grouped,
.deck-list-scrollable > .deck-main-section {
    margin-top: 8px;
}

/* Desktop only (main pane and docked panes): the phone toolbar has no bottom
   margin to pair with. */
.has-rail .deck-list-scrollable > :first-child,
.side-pane .deck-list-scrollable > :first-child {
    margin-top: 0;
}

.deck-zone-content {
    padding-left: 8px;
    /* Positioned so it paints above the zone banner's downward overhang: the
       banner's gradient shows only in the gaps around the group cards. */
    position: relative;
}

/* Zone banners (Deck, Sideboard, Command Zone…). The text and badges sit exactly
   where they always did; the *background* is a pseudo-element that extends well
   below the header, fading top-to-bottom so the banner appears to drop behind the
   zone's first groupings — the zone reads as one grouped body rather than a bar
   floating above unrelated cards. Accent-derived rather than the per-theme
   `--deck-header-bg` gradients, whose left-to-right fade this replaces. */
.deck-zone-header {
    position: relative;
    /* Own stacking context: without it the z-index -1 pseudo escapes to the
       nearest ancestor context and vanishes behind its opaque background. */
    z-index: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Compact: a label row, not a banner. No accent side-bar any more; it
       clashed with the rail's docked/active edge markers beside it. */
    min-height: 30px;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
}

/* The header's margin is the only space above a zone's first entries. The Stack
   view pads itself for the phone layout and ZoneDisplay nests a second
   `.deck-stack-view` around it; neither may add to the gap here. */
.deck-zone-content .deck-stack-view {
    padding-top: 0;
}

.deck-zone-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% + 120px);
    background: linear-gradient(
        180deg,
        rgba(var(--accent-rgb), 0.16),
        rgba(var(--accent-rgb), 0.05) 55%,
        transparent
    );
    border-radius: 4px 4px 0 0;
    pointer-events: none;
    z-index: -1;
}

.deck-zone-header .group-label {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--deck-header-text);
}

.deck-zone-header .group-badge {
    padding: 1px 7px;
    font-size: 0.8em;
}

/* Deck Entry */
.deck-entry {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 12px;
    min-height: 40px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9em;
    background: var(--widget-bg);
    transition: background 0.2s;
    position: relative;
    color: var(--text-color);
}

.deck-entry:hover {
    background: var(--entry-hover-bg);
}

.deck-entry.invalid {
    opacity: 0.7;
    background: var(--danger-bg);
    border-left: 3px solid var(--danger-color);
}

.deck-entry.invalid .entry-name {
    color: var(--danger-color);
}

.deck-entry.filtered-out {
    opacity: 0.25;
    pointer-events: none;
}

.deck-entry.has-validation-errors {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 0%, rgba(220, 53, 69, 0.1) 100%);
    border-left: 3px solid #dc3545;
}

.deck-entry.has-validation-errors:hover {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.35) 0%, rgba(220, 53, 69, 0.15) 100%);
}

.deck-entry.has-validation-errors .entry-name {
    color: var(--danger-color);
}

/* Unreleased cards are informational, not a deckbuilding mistake — same treatment as
   has-validation-errors but in the "Unreleased" legality badge's info color. */
.deck-entry.is-unreleased:not(.has-validation-errors) {
    background: linear-gradient(90deg, var(--info-bg) 0%, transparent 100%);
    border-left: 3px solid var(--info-color);
}

.deck-entry.is-unreleased:not(.has-validation-errors):hover {
    background: linear-gradient(90deg, var(--info-border) 0%, var(--info-bg) 100%);
}

.deck-entry.is-unreleased:not(.has-validation-errors) .entry-name {
    color: var(--info-color);
}

/* Pod house rules disagreeing with the format. A pod ban on a format-legal card
   ranks below a real validation error; a pod *allowance* outranks it, because the
   format ban producing that error is exactly what the group voted to override
   (matching the ring priority in `CardView`). */
.deck-entry.pod-rule-banned:not(.has-validation-errors),
.deck-entry.pod-rule-allowed {
    background: linear-gradient(90deg, var(--warning-bg, #d299221a) 0%, transparent 100%);
    border-left: 3px solid var(--warning-color, #d29922);
}

.deck-entry.pod-rule-banned:not(.has-validation-errors):hover,
.deck-entry.pod-rule-allowed:hover {
    background: linear-gradient(90deg, var(--warning-border, #d299224d) 0%, var(--warning-bg, #d299221a) 100%);
}

.deck-entry.pod-rule-banned:not(.has-validation-errors) .entry-name,
.deck-entry.pod-rule-allowed .entry-name {
    color: var(--warning-color, #d29922);
}

.entry-count {
    font-weight: bold;
    color: var(--accent-color);
    min-width: 24px;
    text-align: right;
}

/* The app-wide two-name presentation, in list rows: primary name on top, the
   back face's name as a smaller muted subtitle stacked beneath. */
.entry-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.entry-name-primary {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1em;
}

.entry-name-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78em;
    color: var(--text-muted);
    font-weight: 400;
}

/* Role cards (commander, companion) carry the theme's accent, not the old
   fixed gold/purple: the subtitle keeps its muted color via its own rule. */
.deck-entry .entry-name.commander-name,
.deck-entry .entry-name.companion-name {
    color: var(--accent-color);
    font-weight: 600;
}

/* The mana column: content-sized and right-anchored against the set cluster, so
   costs end-align down the list while each row's NAME flexes all the way up to its
   own cost — no fixed column cutoff wasting the space a three-pip cost leaves.
   Two-cost cards (MDFCs, Rooms, split/fuse, aftermath) stack the second cost
   beneath, smaller and dimmed, mirroring the primary/subtitle name split. */
.card-entry-mana {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Matches the visual spacing between the primary name and its subtitle. */
    gap: 3px;
    flex-shrink: 0;
}

.card-entry-mana-primary,
.card-entry-mana-secondary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
}

.card-entry-mana-secondary {
    opacity: 0.6;
}

.card-entry-mana .mana-symbol {
    width: 14px;
    height: 14px;
}

.card-entry-mana-secondary .mana-symbol {
    width: 11px;
    height: 11px;
}

.entry-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 132px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.deck-entry:hover .entry-controls {
    opacity: 1;
}

.mana-divider {
    font-weight: 800;
    color: var(--text-muted);
    margin: 0 4px;
    font-size: 0.85em;
    user-select: none;
    opacity: 0.6;
}

.entry-buttons {
    display: flex;
    gap: 4px;
}

.validation-icon {
    color: var(--danger-color);
    font-size: 0.9em;
    margin-left: 6px;
}

/* Deck Actions */
.deck-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-shrink: 0;
    padding-top: 16px;
}

.clear-deck-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.clear-deck-btn:hover {
    background: var(--danger-bg);
}

/* Empty Deck State */
.empty-deck {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-deck .hint {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.empty-import-btn {
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 12px var(--accent-glow);
    transition: all 0.2s;
}

.empty-import-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    background: var(--accent-gradient);
    box-shadow: 0 6px 16px var(--accent-glow);
}

/* Commander Button in Deck Entry */
.cmdr-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.cmdr-btn:hover {
    opacity: 1;
    background: var(--warning-bg);
    transform: scale(1.2);
}

.cmdr-menu {
    cursor: pointer;
    font-size: 1.2em;
    color: var(--warning-color);
    margin-left: 4px;
}

/* Stack View */
.deck-stack-view {
    /* Same `--card-scale` the grid uses, so switching between Grid and Stack keeps the
       reader's chosen card size instead of resetting it. */
    /* Capped at the available width so the largest sizes shrink to fit on a narrow viewport
       instead of pushing the row off the right edge. */
    --stack-pile-width: min(calc(220px * var(--card-scale, 1)), 100%);
    --stack-pile-gap: 20px;
    --stack-column-chrome: 26px;
    --stack-inner-pile-gap: calc(var(--stack-pile-gap) + var(--stack-column-chrome));
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--stack-pile-gap);
    padding: 16px;
    width: 100%;
    overflow: visible;
    height: auto;
}

.stack-column {
    --stack-inner-columns: 1;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc(
        ((var(--stack-pile-width) + var(--stack-column-chrome)) * var(--stack-inner-columns))
        + (var(--stack-pile-gap) * (var(--stack-inner-columns) - 1))
    );
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
}

.stack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.9rem;
    height: 36px;
    margin-bottom: 4px;
}

.stack-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.stack-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Set/Number binder group symbol: Scryfall set SVG masked to the header text
   color so it reads on any theme (used by both stack/grid and list headers). */
.stack-set-symbol,
.group-set-symbol {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.group-set-symbol { width: 18px; height: 18px; }

.stack-count {
    background: var(--button-bg);
    color: var(--text-color);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    min-width: 24px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.stack-cards {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--stack-pile-width);
    width: var(--stack-pile-width);
    min-width: var(--stack-pile-width);
    max-width: var(--stack-pile-width);
}

.stack-cards-filtered {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--stack-pile-width);
    width: var(--stack-pile-width);
    min-width: var(--stack-pile-width);
    max-width: var(--stack-pile-width);
    gap: 8px;
}

.stack-columns-row,
.stack-columns-row-filtered {
    display: flex;
    gap: var(--stack-inner-pile-gap);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.stack-columns-row-filtered {
    margin-top: 12px;
}

.stack-card {
    position: relative;
    width: 100%;
    aspect-ratio: 63/88;
    /* The visible sliver scales with the cards. It was a constant 36px, which is a name and a
       mana cost on a small card and a bare strip of border on a large one -- so zooming in
       showed a smaller share of each card, the opposite of what the control is for.
       1.396 is the height/width ratio (88/63). */
    margin-bottom: calc(-1.396 * 100% + (36px * var(--card-scale, 1)));
    transition: transform 0.2s ease, z-index 0s;
    cursor: pointer;
    z-index: 0;
}

.stack-card:last-child {
    margin-bottom: 0;
}

.stack-card img {
    width: 100%;
    border-radius: 9px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s;
}

/* Stack cards overlap, so only the visible sliver of a lower card can carry the
   pod house-rule signal — a ring on the art reads there where a row tint would
   not. Matches the grid ring in `CardView`. */
.stack-card.pod-rule-banned > img,
.stack-card.pod-rule-allowed > img,
.stack-card.pod-rule-banned .card-image-container img,
.stack-card.pod-rule-allowed .card-image-container img {
    border: 1px solid var(--warning-color, #d29922);
    box-shadow: 0 0 12px var(--warning-color, #d29922);
}

.stack-card:hover,
.stack-card.hover-active {
    z-index: 100;
    transform: translateY(-5px) scale(1.05);
}

.stack-card:hover img,
.stack-card.hover-active img {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.stack-card-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    font-weight: bold;
    font-size: 0.8rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 20;
}


.stack-add-btn,
.stack-remove-btn {
    position: absolute;
    bottom: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 21;
    font-size: 0.8rem;
    padding: 0;
    transition: all 0.2s ease;
    border: none;
    color: var(--button-primary-text, white);
    font-weight: bold;
}

.stack-add-btn {
    right: -8px;
    background: rgba(46, 204, 113, 0.9);
}

.stack-remove-btn {
    left: -8px;
    background: rgba(231, 76, 60, 0.9);
}

.stack-card:hover .stack-add-btn,
.stack-card:hover .stack-remove-btn,
.stack-card.hover-active .stack-add-btn,
.stack-card.hover-active .stack-remove-btn {
    display: flex;
}

.stack-add-btn:hover {
    background: var(--success-color);
    transform: scale(1.1);
}

.stack-remove-btn:hover {
    background: var(--danger-color);
    transform: scale(1.1);
}

/* Command Zone Section */
.command-zone-section {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 6px;
}

.command-zone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: var(--widget-bg);
    border-radius: 6px;
}

.command-zone-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.command-zone-count {
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.command-zone-identity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.command-zone-identity-symbol {
    width: 15px;
    height: 15px;
}

.command-zone-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.command-zone-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--widget-bg);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color);
    transition: background 0.2s ease;
    cursor: pointer;
}

.command-zone-entry:hover {
    background: var(--accent-bg-hover);
}

.cz-badge {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 14px;
    flex-shrink: 0;
}

.cz-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cz-mana {
    font-family: monospace;
    font-size: 0.85em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cz-mana-symbols {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.cz-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.command-zone-entry:hover .cz-remove-btn {
    opacity: 1;
}

.cz-remove-btn:hover {
    color: var(--danger-color);
}

/* Companion Section */
.companion-section {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 8px;
}

.companion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: var(--widget-bg);
    border-radius: 6px;
}

.companion-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--warning-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.companion-count {
    background: var(--warning-color);
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.companion-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.companion-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--widget-bg);
    border-radius: 6px;
    border-left: 3px solid var(--warning-color);
    transition: background 0.2s ease;
    cursor: pointer;
}

.companion-entry:hover {
    background: var(--warning-bg);
}

.companion-entry:hover .cz-remove-btn {
    opacity: 1;
}

/* Stack View Overlay Controls */
.stack-cmd-btn-overlay {
    position: absolute;
    bottom: 75px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 25;
    pointer-events: none;
}

.stack-crown-btn,
.stack-companion-btn {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
}

.stack-card:hover .stack-crown-btn,
.stack-card:hover .stack-companion-btn,
.stack-card.hover-active .stack-crown-btn,
.stack-card.hover-active .stack-companion-btn {
    opacity: 1;
    transform: translateY(0);
}

.stack-crown-btn:hover,
.stack-companion-btn:hover {
    transform: scale(1.1) translateY(0);
    background: rgba(0, 0, 0, 0.8);
    border-color: var(--accent-color);
}

.stack-crown-btn.active {
    opacity: 1;
    transform: translateY(0);
    background: rgba(138, 43, 226, 0.8);
    border-color: #8a2be2;
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.stack-companion-btn.active {
    opacity: 1;
    transform: translateY(0);
    background: rgba(234, 179, 8, 0.8);
    border-color: #eab308;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

/* Mobile Deck Overrides */
@media (max-width: 768px) {
    .deck-header {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    /* Hide preview on mobile - saves space */
    .deck-preview-column {
        display: none;
    }

    .deck-controls {
        width: 100%;
    }

    .deck-zone-content {
        padding-left: 0;
    }

    .deck-stack-view {
        --stack-pile-gap: 10px;
        --stack-column-chrome: 12px;
        padding: 6px;
        gap: var(--stack-pile-gap);
    }

    .stack-column {
        flex: 1 1 calc((100% - var(--stack-pile-gap)) / 2);
        width: calc((100% - var(--stack-pile-gap)) / 2);
        min-width: 0;
        max-width: calc((100% - var(--stack-pile-gap)) / 2);
        padding: 6px;
    }

    .stack-column.stack-column-wide {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }

    .stack-columns-row,
    .stack-columns-row-filtered,
    .location-stack-cards {
        gap: var(--stack-pile-gap);
    }

    .stack-cards,
    .stack-cards-filtered {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .location-stack-card {
        flex: 1 1 calc((100% - var(--stack-pile-gap)) / 2);
        width: calc((100% - var(--stack-pile-gap)) / 2);
        min-width: 0;
        max-width: calc((100% - var(--stack-pile-gap)) / 2);
    }

    /* Compact format row */
    .format-row {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        margin-bottom: 8px;
    }    /* Deck entries - reduced height for better information density */
    .deck-entry {
        padding: 6px 10px;
        min-height: 38px;
        gap: 8px;
    }

    .entry-count {
        min-width: 28px;
        font-size: 1em;
    }

    .entry-name {
        font-size: 0.9em;
    }

    /* Entry buttons - larger for touch */
    .entry-buttons {
        gap: 6px;
    }

    .entry-buttons button {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
        font-size: 1.1em;
    }

    /* Action button grid - 4 columns for compact buttons */
    .deck-action-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    /* Hide text labels in action grid on mobile */
    .deck-action-grid .deck-control-btn span {
        display: none;
    }

    .deck-action-grid .deck-control-btn svg {
        margin: 0;
        font-size: 1.4em;
    }

    .deck-action-grid>button {
        min-height: 44px;
        padding: 10px 0;
        font-size: 0.75em;
        justify-content: center;
    }

    .deck-action-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Control buttons - larger touch targets */
    .deck-control-btn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.8em;
    }

    /* AI row buttons */
    .deck-ai-row {
        flex-wrap: wrap;
    }

    .deck-ai-row .deck-control-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 100px;
    }

    .deck-info-stats {
        flex-wrap: wrap;
    }

    /* Let parent handle scrolling */
    .deck-content-inner {
        overflow: visible !important;
    }

    /* Command zone - more compact */
    .command-zone-section {
        padding: 8px;
    }

    .command-zone-entry {
        padding: 8px;
    }

    .companion-section {
        padding: 8px;
    }

    .companion-entry {
        padding: 8px;
    }
}

/* Unified Deck Control Button */
.deck-control-btn {
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    flex: 1;
    transition: filter 0.2s;
    font-size: 0.9em;
    min-width: 0;
    white-space: nowrap;
}

.deck-control-btn:hover {
    filter: brightness(1.1);
}

.deck-control-btn:disabled {
    filter: grayscale(1);
    cursor: not-allowed;
    opacity: 0.7;
}

.deck-control-btn.secondary {
    background: #334155;
}

/* AI & Goldfish Controls */
.deck-ai-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}

.ai-summary-button-group,
.ai-suggestions-button-group {
    display: flex;
    gap: 8px;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Specific overrides if needed, but deck-control-btn handles most */
/* Legacy classes removed */

/* Card reference styles for suggestions */
.card-ref {
    color: var(--accent-color);
    font-weight: 600;
    cursor: help;
    border-bottom: 1px dotted var(--accent-color);
    transition: all 0.2s ease;
}

.card-ref:hover {
    background: var(--accent-bg-hover);
    color: var(--accent-hover);
}


/* Deck suggestions content styling */
.ai-suggestions-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.25rem;
}

.ai-suggestions-content ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.ai-suggestions-content li {
    margin-bottom: 0.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ai-suggestions-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* Toolbar Groups */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.search-input-container {
    /* A fixed working width rather than elastic: the field yields (down to 90px) before
       its group wraps, but never grows into the inter-group gaps. */
    flex: 0 1 auto;
    width: 240px;
    min-width: 90px;
}

.sort-select-container {
    /* A row rather than a fixed block: the Tags button appears here the moment the Tag sort
       is chosen, and a fixed 230px would push it onto its own line. Never shrinks -- the sort
       dropdown and the Tags label are both already at their minimum legible size, so any
       squeeze has to come from the search field or from wrapping. */
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 230px;
}

.sort-select-container > .sort-control {
    /* `width: auto` is the fix. `.sort-control` is declared `width: 100%` for the case where it
       is the only thing in its container; here it has the Tags button beside it, and a child
       claiming the container's full width left the button with nothing -- which is why it kept
       being crushed against Asc/Desc no matter what flex the button itself asked for. */
    width: auto;
    flex: 1 1 auto;
    min-width: 120px;
}

/* Everything visual comes from `.toolbar-filter-btn`, shared with Research and Filter, and
   the sizing is now nothing more than a shrink guard. Every earlier attempt to size this
   button failed for the same reason: a missing brace had spilled the mobile toolbar rules to
   top level, so `flex: 1 1 0% !important` was hitting every one of these buttons at desktop
   widths and the button's width came from grow distribution instead of its content. With the
   media block restored (see the re-opened block above the compact refinements), content-based
   sizing simply works. */
.toolbar-tag-customize-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.secondary-row {
    /* Same reasoning as the search row above: this row cannot wrap internally, so it must
       not be squeezed below its contents either. Right-aligned as the bar's presentation shore —
       the find/order cluster holds the left, this holds the right, and the space between
       is deliberate. */
    flex: 0 1 auto;
    min-width: min-content;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.button-group-left, .button-group-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Compact Search */
.toolbar-search-input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0 12px;
    color: var(--text-color);
    font-size: 0.9em;
    width: 100%;
    max-width: 300px;
    transition: width 0.2s ease, box-shadow 0.2s;
    display: block;
}

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

/* Filter Toggle Button */
.toolbar-filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    transition: all 0.2s;
}

.toolbar-filter-btn:hover,
.toolbar-filter-btn.active {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* View Toggles Styles */
.toolbar-view-toggles {
    display: flex;
    gap: 4px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 2px;
    border-radius: 6px;
    align-self: center;
}

.toolbar-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-view-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.toolbar-view-btn.active {
    background: var(--accent-color);
    color: white;
}

/* Collapsible Filter Drawer */
.filter-drawer {
    background: var(--widget-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    height: auto;
    flex-shrink: 0;
    animation: slideDown 0.2s ease-out;
}

@media (max-width: 768px) {
    .filter-drawer {
        overflow: visible !important;
        padding-bottom: 24px !important;
        height: auto !important;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Styles */
.dropdown-group {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    border-radius: 8px;
    padding: 6px;
    z-index: 200;
    min-width: 180px;
    box-shadow: 0 8px 24px var(--popup-shadow);
    margin-top: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(-10px);
}

.dropdown-group.active .dropdown-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-group.active .deck-control-btn {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: var(--button-primary-text, white) !important;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.menu-item span {
    white-space: nowrap;
}

.menu-item:hover {
    background: var(--hover-bg);
}

.menu-item svg {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Card sizing is a desktop feature. A phone shows two columns at best, so every step
       either changes nothing or pushes a card off the edge -- and the control itself costs
       more room in this toolbar than the resizing was ever worth.

       `!important` on the variable is load-bearing: the scale is published as an inline style
       on the root element, and only an important declaration outrules that. Without it a 160%
       chosen on a desktop would follow the reader onto their phone. */
    :root {
        --card-scale: 1 !important;
    }

    .toolbar-card-scale {
        display: none !important;
    }    .toolbar-divider {
        display: none !important;
    }    .search-input-container {
        width: 100%;
    }

    .sort-select-container {
        width: 100%;
        /* The Tag sort adds a Tags button to this row; wrapping gives it a line of its own
           rather than squeezing the sort dropdown and the direction pill to fit. */
        flex-wrap: wrap;
        min-width: 0;
    }

    .sort-select-container > .sort-control {
        /* Restores the full-width behaviour the desktop rule turns off: on its own wrapped
           line the sort control has no button beside it to make room for. */
        flex: 1 1 100%;
        width: 100%;
    }

    .toolbar-tag-customize-btn {
        flex: 1 1 auto;
    }

    .toolbar-search-input,
    .toolbar-sort-select,
    .sort-control-select {
        width: 100% !important;
        height: 42px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
    }    /* Row 3: Action Buttons */
    .secondary-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 6px !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        flex: none !important;
    }

    .button-group-left {
        display: contents !important; /* Flatten for equal flex distribution */
    }

    .button-group-left .toolbar-filter-btn {
        flex: 1 1 0% !important; /* Force equal width */
        height: 42px !important;
        justify-content: center !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    .toolbar-view-toggles {
        flex: 0 0 auto !important;
        height: 42px !important;
    }

}

@media (max-width: 768px) {}

/* Re-opens the mobile block for the rules below. They were authored inside it -- the run
   ends with an orphaned closing brace -- but a missing brace left them at top level, applying
   at every width. That leak is what made the toolbar buttons ungovernable from their own
   rules: every `.toolbar-filter-btn` had `flex: 1 1 0%` forced on it on desktop, so its width
   came from grow distribution rather than its content, and no amount of content-based sizing
   on the button itself could take effect. */
@media (max-width: 768px) {

    .toolbar-group.center {
        display: none;
    }

    /* Standardize button sizes */
    .toolbar-filter-btn,
    .ai-summary-button-group,
    .ai-suggestions-button-group {
        padding: 0 !important;
        /* Let children handle padding */
        height: 38px !important;
        flex: 1 !important;
        /* Make buttons even width on bottom row */
        display: flex !important;
        justify-content: center;
        min-width: 0;
    }

    .ai-summary-button-group .deck-control-btn,
    .ai-suggestions-button-group .deck-control-btn {
        width: 100% !important;
        height: 100% !important;
        padding: 8px 12px !important;
    }

    .toolbar-filter-btn {
        padding: 8px 12px !important;
    }

    /* Filter button stays auto-sized; dropdown fills the rest */
    .toolbar-group.left .toolbar-filter-btn {
        flex: 0 0 auto;
    }

    /* Hide AI pro-feature buttons on mobile for non-pro users */
    .pro-toolbar-actions.not-pro {
        display: none !important;
    }

    .pro-toolbar-actions {
        display: flex !important;
    }

    /* Merged above */
}

/* ============================================
   DECK NOTEPAD COMPONENT
   ============================================ */
.notepad-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1150;
    /* Covers everything but the notepad panel */
}

.deck-notepad-panel {
    position: fixed;
    top: 0;
    right: -70%;
    width: 70%;
    max-width: 90vw;
    height: 100dvh;
    background: #fdfbf7;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
    z-index: 7000;
    /* Higher than mobile-search-fab (1100) */
    transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d4c4a8;
}

.deck-notepad-panel.open {
    right: 0;
}

.notepad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--panel-bg-opaque);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    flex-shrink: 0;
}

.notepad-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Georgia', serif;
}

.notepad-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notepad-btn:hover {
    background: var(--entry-hover-bg);
}

.notepad-btn.primary:hover {
    color: var(--accent-color);
}

.notepad-content {
    flex: 1;
    min-height: 0;
    padding: 32px 20px 20px 20px;
    /* Provide a top margin like a real notepad */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    position: relative;
    /* Composite background: Vertical red line + Horizontal tan lines */
    background-image:
        linear-gradient(to right,
            transparent var(--notepad-margin-pos, 39px),
            rgba(220, 50, 50, 0.3) var(--notepad-margin-pos, 39px),
            rgba(220, 50, 50, 0.3) calc(var(--notepad-margin-pos, 39px) + 2px),
            transparent calc(var(--notepad-margin-pos, 39px) + 2px)),
        repeating-linear-gradient(transparent,
            transparent var(--notepad-line-gap, 27px),
            #e2cfb6 var(--notepad-line-gap, 27px),
            #e2cfb6 var(--notepad-line-height, 28px));
    background-size: 100% 100%, 100% var(--notepad-line-height, 28px);
    background-attachment: local, local;
    background-repeat: no-repeat, repeat;
    background-position: 0 0;
}

/* Vertical Margin Line is now part of the background of .notepad-content */

.notepad-textarea {
    width: 100%;
    min-height: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    line-height: var(--notepad-line-height, 28px);
    font-family: 'Patrick Hand', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--notepad-font-size, 18px);
    color: #333;
    z-index: 2;
    position: relative;
    padding: 0 0 20px 50px;
    display: block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    /* Ensure text wraps */
    word-break: break-word;
    /* Fine-tune baseline alignment for Patrick Hand font */
    transform: translateY(-2px);
}

.notepad-textarea * {
    line-height: var(--notepad-line-height, 28px);
    margin-block-start: 0;
    margin-block-end: 0;
}

.notepad-textarea p,
.notepad-textarea div {
    min-height: var(--notepad-line-height, 28px);
}

.notepad-read-only {
    position: relative;
    z-index: 2;
    padding: 0 0 20px 50px;
    font-family: 'Patrick Hand', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--notepad-font-size, 18px);
    color: #333;
    line-height: var(--notepad-line-height, 28px);
    min-height: 100%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Fine-tune baseline alignment for Patrick Hand font */
    transform: translateY(-2px);
}

.notepad-read-only p {
    margin: 0;
    min-height: var(--notepad-line-height, 28px);
}

.notepad-textarea:empty:before {
    content: attr(placeholder);
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
    cursor: text;
}

/* Edit Toolbar */
.notepad-toolbar {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    gap: 8px;
    padding: 6px 40px;
    /* Aligned with the red margin line */
    background: #efe6d5;
    border-bottom: 1px solid #d4c4a8;
    z-index: 5;
    animation: slideDown 0.15s ease-out;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .notepad-toolbar {
        padding: 6px 15px;
    }
}

.notepad-toolbar-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #5c4d3c;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notepad-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.1);
}

.notepad-toolbar-btn.active {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Markdown rendered styles in read-only */
.notepad-read-only strong {
    font-weight: bold;
}

.notepad-read-only em {
    font-style: italic;
}

.notepad-read-only del,
.notepad-textarea del {
    text-decoration: line-through;
}

.notepad-read-only ul,
.notepad-textarea ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    /* Restore bullets */
}

/* Specific to task lists to hide the default disc when checkbox is present */
.notepad-read-only li.task-list-item,
.notepad-textarea li.task-list-item {
    list-style: none !important;
}

.notepad-panel li p {
    display: inline;
    margin: 0;
    line-height: inherit;
}

.notepad-read-only pre,
.notepad-textarea pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-all;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
}

.notepad-read-only code,
.notepad-textarea code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.task-list-item {
    list-style-type: none !important;
}

.notepad-read-only li,
.notepad-textarea li {
    line-height: var(--notepad-line-height, 28px);
    display: list-item;
    margin-bottom: 0;
}

/* Base styles for all checkboxes in the notepad */
.notepad-checkbox,
.notepad-read-only input[type="checkbox"],
.notepad-textarea input[type="checkbox"] {
    margin: 0 8px 0 0;
    transform: scale(1.1);
    cursor: pointer;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    position: relative;
    top: -1px;
}

.notepad-read-only .mana-symbol,
.notepad-textarea .mana-symbol {
    height: 16px;
    width: 16px;
    vertical-align: -2px;
}

@media (max-width: 768px) {
    :root {
        --notepad-line-height: 24px;
        --notepad-line-gap: 23px;
        --notepad-font-size: 16px;
        --notepad-margin-pos: 34px;
        --notepad-img-height: 220px;
        /* 10 lines total footprint: 240px. 240 - 20 (margins) = 220 */
    }

    .deck-notepad-panel {
        width: 100% !important;
        right: -100% !important;
        max-width: 100vw;
    }

    .deck-notepad-panel.open {
        right: 0 !important;
    }

    .notepad-textarea,
    .notepad-read-only {
        padding-left: 45px;
    }

    .notepad-card-preview {
        margin-left: 0;
        max-width: 100%;
        height: var(--notepad-img-height);
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* Card Previews in Notepad */
.notepad-card-preview {
    height: var(--notepad-img-height, 292px);
    /* 11 lines total footprint: 308px. 308 - 16 (margins) = 292 */
    width: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 8px 0 8px 50px;
    /* Align with text margin */
    display: block;
    transition: transform 0.2s;
}

.notepad-card-preview:hover {
    transform: scale(1.25);
}

/* ============================================
   SET FILTER — autocomplete input, dropdown, chips
   ============================================ */

.deck-filter-set-input {
    width: 100%;
    padding: 4px 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.85em;
}

.deck-filter-set-results {
    position: absolute;
    z-index: 100;
    background: var(--panel-bg-opaque);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 180px;
    overflow-y: auto;
    width: 100%;
    left: 0;
    top: 100%;
}

.deck-filter-set-option {
    padding: 6px 8px;
    cursor: pointer;
    font-size: 0.85em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    color: var(--text-color);
    font-family: inherit;
}

.deck-filter-set-option:hover {
    background: var(--accent-bg-hover);
}

.deck-filter-set-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.deck-filter-set-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    font-size: 0.8em;
    color: var(--accent-color);
}

.deck-filter-set-chip button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 1.1em;
}

.deck-filter-set-chip button:hover {
    color: var(--danger-color);
}

.notepad-footer {
    padding: 8px 20px;
    display: flex;
    justify-content: flex-end;
    background: rgba(253, 251, 247, 0.8);
    border-top: 1px solid #d4c4a8;
    z-index: 10;
}

.char-count {
    font-size: 0.75rem;
    color: #888;
    font-family: var(--font-family);
}

.char-count.warning {
    color: var(--danger-color);
    font-weight: bold;
}

/* Deck Research Panel */
.deck-research-container {
    margin: 8px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.deck-research-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--deck-header-bg);
    user-select: none;
    transition: background 0.2s ease;
}

.deck-research-toggle:hover {
    background: var(--accent-bg-hover);
}

.deck-research-toggle .header-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.deck-research-toggle .research-icon {
    color: var(--accent-color);
    font-size: 1.1em;
}

.deck-research-toggle .research-label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-color);
}

.deck-research-toggle .chevron-icon {
    color: var(--text-muted);
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.deck-research-content {
    border-top: 1px solid var(--divider-border);
    padding: 12px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

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

.video-card.active {
    border-color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.05);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.1);
}

.video-card.active .video-title {
    color: var(--accent-color);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: var(--entry-bg);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.play-overlay .ui-icon {
    color: white;
    font-size: 1.5em;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.video-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-title {
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-color);
}

.video-author {
    font-size: 0.7em;
    color: var(--text-muted);
}

.research-footer {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid var(--divider-border);
}

.edhrec-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-gradient);
    color: white;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: all 0.2s ease;
}

.edhrec-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.video-card.resource-card {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0;
}

.video-card.resource-card:hover {
    background: transparent;
}

.video-thumbnail.resource-thumb {
    background: #1a1a24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.resource-background-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    filter: blur(1px) grayscale(0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-card.resource-card:hover .resource-background-art {
    opacity: 0.4;
    transform: scale(1.05);
}

.resource-logo-container {
    position: relative;
    z-index: 5;
    width: 80%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-logo-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.resource-text-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.resource-text-logo .ui-icon {
    font-size: 2em;
}

.resource-text-logo span {
    font-size: 0.9em;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.research-loading {
    padding: 10px 0;
}

.skeleton-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.skeleton-item {
    height: 80px;
    background: linear-gradient(90deg, var(--entry-bg) 25%, var(--border-color) 50%, var(--entry-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 6px;
}

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

    100% {
        background-position: -200% 0;
    }
}

.research-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}

.research-empty .ui-icon {
    font-size: 2em;
    opacity: 0.5;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Research Drawer */
.research-drawer {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px;
    animation: slideDown 0.3s ease;
}

.research-empty-state {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    background: var(--entry-bg);
    border-radius: 6px;
}

/* Research Tabs */
.research-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 8px;
}

.research-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.research-tab:hover {
    color: var(--text-color);
    background: var(--entry-hover-bg);
}

.research-tab.active {
    color: var(--accent-color);
    background: var(--accent-bg-hover);
    border-color: var(--accent-color);
}

@media (max-width: 768px) {
    .research-tabs {
        gap: 4px;
        justify-content: space-around;
    }

    .research-tab {
        padding: 6px 8px;
        flex: 1;
        justify-content: center;
    }

    .research-tab .tab-text {
        display: none;
    }

    .research-tab.active .tab-text {
        display: inline;
    }

    .research-tab:not(.active) .tab-count {
        margin-left: 0;
    }
}

/* Podcast List */
.podcast-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.podcast-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--entry-bg);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.podcast-item:hover {
    background: var(--entry-hover-bg);
    border-color: var(--accent-color);
}

.podcast-item.active {
    border-color: var(--accent-color);
    background: var(--accent-bg-hover);
    box-shadow: 0 0 10px var(--accent-glow);
}

.podcast-thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.podcast-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.podcast-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podcast-show {
    font-size: 0.75em;
    color: var(--text-muted);
}


.tab-count {
    background: var(--accent-color);
    color: white;
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 800;
    min-width: 16px;
    text-align: center;
    line-height: 1;
}

/* Podcast Player Banner */
.podcast-player-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #181818;
    backdrop-filter: blur(12px);
    z-index: 150;
    padding: 12px 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

.podcast-player-banner::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to top, #181818, transparent);
    pointer-events: none;
    transition: background 0.3s ease;
}

.podcast-player-banner.light {
    background: #ffffff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

.podcast-player-banner.light::before {
    background: linear-gradient(to top, #ffffff, transparent);
}

.player-content,
.player-content-simple {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr 40px;
    align-items: center;
    gap: 20px;
}

.player-content-simple {
    grid-template-columns: 1fr 40px;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.player-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
}

.player-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.player-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-show {
    font-size: 0.75em;
    color: var(--text-muted);
}

.player-embed-container {
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: inherit;
}

.player-close,
.player-close-large {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.player-close:hover,
.player-close-large:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
}

.player-hint {
    font-size: 0.8em;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    margin-top: 8px;
}

.animate-slide-up {
    animation: slideUpBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpBanner {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .podcast-player-banner {
        bottom: 44px; /* Lowered 8px from 52px */
        padding: 4px 6px;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
        position: fixed;
        z-index: 150; /* Below the fixed bottom bars (--mobile-nav-z) */
    }

    /* Add a skirt so nothing renders from under the banner */
    .podcast-player-banner::after {
        content: '';
        position: absolute;
        top: 20px; /* Start from inside to cover the radius area if needed */
        left: 0;
        right: 0;
        bottom: -100px; /* Long extension downwards */
        background: inherit;
        z-index: -1;
        pointer-events: none;
    }

    .podcast-player-banner.has-subtabs {
        bottom: 79px; /* Lowered 8px from 87px */
    }

    .podcast-player-banner.tabs-hidden {
        bottom: 0;
    }


    .player-content-simple {
        grid-template-columns: 1fr;
        position: relative;
    }

    .player-close-large {
        position: absolute;
        top: 2px;
        right: 2px;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(8px);
        padding: 5px;
        z-index: 20;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .player-embed-container {
        border-radius: 6px;
    }
}

/* Video Player Banner */
.video-player-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0f0f0f;
    backdrop-filter: blur(16px);
    z-index: 150;
    padding: 20px 32px;
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.8);
    transition: background 0.3s ease;
}

.video-player-banner::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, #0f0f0f, transparent);
    pointer-events: none;
}

.video-player-banner.light {
    background: #ffffff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

.video-player-banner.light::before {
    background: linear-gradient(to top, #ffffff, transparent);
}

.player-content-video {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.player-video-container {
    width: 560px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-info-overlay {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 0;
    padding-top: 8px;
}

.video-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.video-title-main {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.video-author-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .video-player-banner {
        bottom: 44px;
        padding: 8px;
    }

    .video-player-banner.has-subtabs {
        bottom: 79px;
    }

    .video-player-banner.tabs-hidden {
        bottom: 0;
    }

    .player-content-video {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .player-video-container {
        width: 100%;
        max-width: none;
    }

    .video-info-overlay {
        padding: 4px;
    }

    .video-title-main {
        font-size: 0.95rem;
    }

    .video-author-sub {
        font-size: 0.8rem;
    }

    .video-player-banner .player-close-large {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ============================================
   DECK LOADING OVERLAY
   Masks sort/image-load flicker on initial render of the Deck panel.
   Mirrors the splash screen's spinning ArcaneMetriX icon over a blurred backdrop.
   ============================================ */
.deck-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    /* Opaque by design: an active subtab may still contain its Suspense fallback underneath,
       and translucency makes both loading indicators visible at once. */
    background-color: var(--bg-color, #0f0f13);
    opacity: 1;
    /* CSS handles the fade so toggling `visible` from Leptos is a single class flip. */
    transition: opacity 0.45s ease-out;
    pointer-events: auto;
}

.deck-loading-overlay--hidden {
    opacity: 0;
    /* Release interactions immediately so the user can click through during fade-out. */
    pointer-events: none;
}

.deck-loading-overlay .loading-widget {
    flex-grow: 0;
    padding: 0 2rem;
}

/* While the overlay is up, suppress every OTHER loading indicator beneath it.

   The overlay is opaque, so a component's own spinner stays hidden while it sits
   at full opacity — but dismissal is a 0.45s opacity fade, and during that fade
   whatever is underneath becomes progressively visible. If a subtab's Suspense
   fallback is still showing, the user watches one spinner dissolve to reveal a
   second one, which reads as a stutter rather than as loading finishing.

   Every use of this overlay places it as a preceding sibling of the content it
   masks, so `~` reaches all of them without each site needing its own class.

   `visibility` rather than `display`: the readiness checks that decide when to
   lift the overlay look for a laid-out `.loading-widget` (via `offsetParent`) to
   know a subtab is still working. `display: none` would clear `offsetParent`,
   the check would conclude everything was ready, and the overlay would lift
   early — the exact problem it exists to prevent. `visibility: hidden` keeps the
   element measurable while making it invisible. */
.deck-loading-overlay:not(.deck-loading-overlay--hidden) ~ * .loading-widget,
.deck-loading-overlay:not(.deck-loading-overlay--hidden) ~ .loading-widget {
    visibility: hidden;
}

/* --- Phantom drop zones ---

   Shown only while a card is being dragged, for boards the deck does not have yet. Pinned
   to the bottom of the viewport so they are reachable without the reader having to scroll
   mid-drag, which is awkward and in some browsers cancels the drag outright. */
.deck-phantom-zones {
    position: fixed;
    left: 50%;
    /* Flush with the foot of the window: the wash is densest where it meets the edge and
       dissolves upward, so a gap under it would leave the solid end hanging in mid-air. */
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 60;
    pointer-events: none;
}

.deck-phantom-zone {
    /* The container is click-through so it never blocks the page; the targets themselves
       must still receive the drop. */
    pointer-events: auto;
    --zone-tint: var(--accent-color);
    min-width: 210px;
    padding: 30px 22px 18px;
    border-radius: 12px 12px 0 0;
    border: none;
    /* A solid-topped wash that fades out at the foot rather than a dashed outline: these sit
       over the decklist for the whole drag, and a hard border drew a box around content that
       is still meant to be readable underneath. */
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--zone-tint) 52%, transparent),
        color-mix(in srgb, var(--zone-tint) 12%, transparent) 65%,
        transparent
    );
    backdrop-filter: blur(4px);
    text-align: center;
    transition: background 0.15s ease;
}

.deck-phantom-zone:hover {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--zone-tint) 80%, transparent),
        color-mix(in srgb, var(--zone-tint) 30%, transparent) 65%,
        transparent
    );
}

/* The bin reads as destructive on sight: it sits among targets that merely move a card, and
   the difference has to be obvious before the pointer is released, not after. Only the tint
   changes, so it keeps the same fade as its neighbours. */
.deck-phantom-zone--trash {
    --zone-tint: var(--danger-color, #e5484d);
}

.deck-phantom-zone-label {
    position: relative;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* The wash behind the label is a mid-tone that neither a light nor a dark foreground reads
       cleanly against. A darkened plate under the text -- rather than a lighter type colour --
       fixes the contrast without washing the tint out. */
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

@media (max-width: 768px) {
    .deck-phantom-zones {
        flex-direction: column;
        width: calc(100% - 24px);
    }

    .deck-phantom-zone {
        min-width: 0;
        padding: 12px 16px;
    }
}

/* Says what tag filtering is holding back, in the header of the board it applies to. Without
   it a zone shows fewer cards than its own badge counts, with nothing on screen to explain the
   gap. Sits just left of that badge so the count and the caveat are read together. */
.tag-hidden-notice {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
    padding: 2px 8px;
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.8;
}

@media (max-width: 768px) {}

/* ── Role zones (Command Zone / Companion) ─────────────────────────────────────
   Entries render with the same widgets as every board; the one addition is a
   hover-revealed X that deselects the role (returning the card to the deck). */
.entry-deselect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.deck-entry:hover .entry-deselect-btn,
.deck-entry:focus-within .entry-deselect-btn {
    opacity: 1;
}

/* Hover/focus treatment comes from the shared destructive-button system in
   buttons.css (`danger-btn` enrollment); only the reveal is defined here. */

/* The hidden-groups notice is a button now — same quiet look, plus the affordances. */
button.tag-hidden-notice {
    cursor: pointer;
    font-family: inherit;
}

button.tag-hidden-notice:hover,
button.tag-hidden-notice:focus-visible {
    color: var(--text-color);
    border-color: var(--text-muted);
    opacity: 1;
}

/* Phone widths: the deck list rows regain the mana column by rearranging — mana
   takes the top-right slot the price held, and the price drops to the second row
   right after the set info. Scoped to .deck-entry so the Collection's list rows
   (which have no mana column) keep their existing arrangement. */
@media (max-width: 768px) {
    /* Column 1 hugs the set cluster's content so the price in column 2 sits
       directly after it; column 3 is the elastic gap. */
    .deck-entry.card-list-row {
        grid-template-columns: minmax(0, max-content) auto 1fr auto;
    }

    .deck-entry.card-list-row > .entry-name {
        grid-area: 1 / 1 / 2 / 4;
    }

    .deck-entry.card-list-row > .card-entry-mana {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
    }

    .deck-entry.card-list-row > .card-meta-cluster {
        grid-column: 1;
        grid-row: 2;
    }

    .deck-entry.card-list-row > .card-entry-price {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        min-width: 0;
    }

    .deck-entry.card-list-row > .entry-controls > .entry-role-controls {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .deck-entry.card-list-row > .entry-controls > .card-widget-controls,
    .deck-entry.card-list-row > .entry-controls--role .entry-deselect-btn {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
    }

    .deck-entry.card-list-row > .entry-controls--role {
        display: contents;
    }
}

@media (max-width: 768px) {}

/* On a phone the page itself scrolls (`.deck-panel` and `.right-panel` are
   `overflow: visible` there), but the subtab content still declared
   `overflow-y: auto` / `overflow-x: hidden` — which makes it a scroll
   container that never scrolls, and traps the summary bar's `sticky` inside
   a box that moves with the page. Release it so the bar pins to the window. */
@media (max-width: 768px) {
    .deckbuilder-subtab-content {
        overflow: visible !important;
    }

}

/* A section scrolled to from the summary strip stops just under it. */
#deck-section-main,
#deck-section-sideboard,
#deck-section-maybeboard,
#deck-section-command,
#deck-section-companion {
    scroll-margin-top: 56px;
}

/* Hairline between groups of hamburger-menu items. */
.dropdown-content .menu-divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--border-color);
}

@media (max-width: 768px) {}

/* ============================================
   DECK SUGGESTIONS STRIP
   Toolbar-toggled drawer of explainable "next card" suggestions. Lives with
   the notepad/filter/research drawers above the scrollable list; the row
   scrolls horizontally so it works at every viewport width.
   ============================================ */

.deck-suggestions-drawer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
    padding: 12px 14px;
    background: var(--widget-bg, var(--panel-bg));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.deck-suggestions-header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
}

/* Title on top, the intent read as its subtitle; the controls sit to the
   right on the title's row while the width allows, and wrap under it when
   it does not. */
.deck-suggestions-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.deck-suggestions-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-color);
}

/* "New data on the way": the refresh icon spins (and the row below dims). */
.deck-suggestions-refresh.loading {
    opacity: 1;
    color: var(--accent-color);
}

.deck-suggestions-refresh.loading .deck-suggestions-refresh-icon {
    animation: spin 0.9s linear infinite;
}

.deck-suggestions-spacer {
    flex: 1;
}

/* Tune, refresh and hide travel as one non-wrapping group so they always
   share a single row, even on compact viewports. */
.deck-suggestions-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.deck-suggestions-tune,
.deck-suggestions-refresh,
.deck-suggestions-hide {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: 12px;
}

.deck-suggestions-tune.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* A count of knobs off their default, so a tuned strip says so at a glance. */
.deck-suggestions-tune-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-contrast, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* The options menu: labelled controls on one row while the width allows,
   with the action buttons pinned to the right; wraps otherwise. Collapsed
   by default. */
.deck-suggestions-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: flex-end;
    padding: 10px 12px;
    background: var(--input-bg, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.deck-suggestions-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    max-width: 220px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.deck-suggestions-option .filter-select {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.deck-suggestions-price-field {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.deck-suggestions-price-field input {
    flex: 1;
}

.deck-suggestions-option-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.deck-suggestions-shuffle,
.deck-suggestions-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
}

.deck-suggestions-status {
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 2px;
}

.deck-suggestions-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    transition: opacity 0.15s ease;
}

/* While a refresh is in flight the old tiles stay visible but clearly stale. */
.deck-suggestions-row.refreshing {
    opacity: 0.45;
    pointer-events: none;
}

/* A tile: the head (name with the other face as subtitle; price and role
   pill on the right) across the top, then a tall art column beside the body
   (signal chips, a two-line reason, the count and the actions). Fixed width
   so the row scrolls; height follows the tallest. */
.deck-suggestion-card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--input-bg, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 0;
}

.deck-suggestion-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
}

.deck-suggestion-main {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* The art takes the whole height beside the body. */
.deck-suggestion-art {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.deck-suggestion-art img {
    height: 100%;
    min-height: 150px;
    max-height: 190px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.deck-suggestion-art-btn {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* Double-faced previews: the flip control sits on the art's corner. */
.deck-suggestion-art .card-flip-btn {
    top: 2px;
    right: 2px;
}

.deck-suggestion-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.deck-suggestion-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.deck-suggestion-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Price above the role pill, right-aligned. */
.deck-suggestion-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: 0 0 auto;
}

.deck-suggestion-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The other face's name, in the app's standard primary/subtitle pattern. */
.deck-suggestion-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.deck-suggestion-price {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Role pill and ranking-signal chips share one wrapping line. */
.deck-suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

/* The role pill and the signal chips share one small badge size. */
.deck-suggestion-role,
.deck-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-suggestion-role {
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    font-weight: 700;
    color: color-mix(in srgb, var(--accent-color) 85%, var(--text-color));
}

.deck-suggestion-chip {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--border-color) 30%, transparent);
    color: var(--text-secondary);
}

.deck-suggestion-chip-glyph {
    font-size: 8px;
    color: var(--accent-color);
}

/* The surplus-relationship count takes the line under the badges; the
   actions pin to the bottom right of the text column. */
.deck-suggestion-more {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
}

.deck-suggestion-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 4px;
}

.deck-suggestion-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
    padding: 4px 10px;
    font-size: 12px;
}

.deck-suggestion-dismiss {
    padding: 4px 7px;
}

/* The intent read under the title: one quiet line saying what the engine
   believes the deck is doing. */
.deck-suggestions-intent {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
}

.deck-suggestions-intent-read {
    font-weight: 500;
}

.deck-suggestions-hidden {
    color: var(--text-muted);
}

/* Compact viewports: the tiles stack full-width as a list (the strip starts
   with a few and steps up on demand), the header controls share one row, and
   the options menu becomes two columns. */
.deck-suggestions-drawer.compact .deck-suggestions-row {
    flex-direction: column;
    overflow-x: visible;
}

.deck-suggestions-drawer.compact .deck-suggestion-card {
    flex: 1 1 auto;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "art head"
        "art body";
    gap: 4px 10px;
    padding: 8px;
}

.deck-suggestions-drawer.compact .deck-suggestion-main {
    display: contents;
}

.deck-suggestions-drawer.compact .deck-suggestion-head {
    grid-area: head;
}

.deck-suggestions-drawer.compact .deck-suggestion-body {
    grid-area: body;
}

.deck-suggestions-drawer.compact .deck-suggestion-art {
    grid-area: art;
    align-self: stretch;
}

.deck-suggestions-drawer.compact .deck-suggestion-art-btn {
    height: 100%;
}

.deck-suggestions-drawer.compact .deck-suggestion-art img {
    height: 100%;
    min-height: 0;
    max-height: none;
    width: auto;
    max-width: 120px;
}

.deck-suggestions-drawer.compact .deck-suggestions-heading {
    flex: 1 1 180px;
}

.deck-suggestions-drawer.compact .deck-suggestions-controls {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}

.deck-suggestions-drawer.compact .deck-suggestions-option {
    flex: 1 1 40%;
    max-width: none;
}

.deck-suggestions-drawer.compact .deck-suggestions-option-actions {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: stretch;
}

.deck-suggestions-drawer.compact .deck-suggestions-option-actions .ui-button {
    flex: 1;
    justify-content: center;
}

.deck-suggestions-more {
    align-self: center;
    padding: 6px 14px;
    font-size: 12px;
}