/* ============================================
   CARDS
   Card grid, card view, popups, and card widgets
   ============================================ */

/* Card Grid */
/* `--card-scale` is published on the document element by the toolbar's zoom control and
   defaults to 1, so any view that has not opted in renders exactly as before. Scaling the
   track minimum rather than the cards themselves keeps the grid responsive: columns still
   reflow to fill the width, there are just more or fewer of them. */
.card-grid {
    display: grid;
    /* `min(..., 100%)` lets the track fall back to a single full-width column. Without it a
       track minimum larger than the container still claims its full width and the row
       overflows horizontally at the larger card sizes. */
    grid-template-columns: repeat(auto-fill, minmax(min(calc(220px * var(--card-scale, 1)), 100%), 1fr));
    gap: 16px;
    padding: 16px;
}

@media (max-width: 768px) {
    /* Two columns is the only sensible layout at this width, so the scale changes how many
       columns fit only above ~1.3x; below that it still affects the widget's own type sizes
       through the container queries in components.css. */
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(calc(150px * var(--card-scale, 1)), 100%), 1fr));
        gap: 8px;
        padding: 6px;
        min-width: 0;
    }

    .card-grid > * {
        min-width: 0;
    }
}


/* Card Item */
.card-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    /* Establishes the query container for the rules further down. The card zoom control can
       take a tile below 140px, and at that width the footer has more to say than it has room
       for. Querying the tile rather than the viewport is what makes this work: the same tile
       is narrow in a zoomed-out grid on a desktop and wide in a zoomed-in grid on a phone, so
       a media query would answer the wrong question. */
    container-type: inline-size;
}

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

/* Card info section */
.card-info h3 {
    margin: 8px 0 4px 0;
    font-size: 0.95em;
}

.other-face-name {
    margin: 0;
    font-size: 0.75em;
    font-style: italic;
    color: var(--text-muted);
}

/* Unified action bar — sits at the bottom of the card image */
.card-action-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    border-radius: 0 0 4.75% 4.75%;
    z-index: 10;
}

/* Desktop: hide until hovered */
@media (hover: hover) {
    .card-action-bar {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .card-item:hover .card-action-bar,
    .stack-card:hover .card-action-bar,
    .stack-card.hover-active .card-action-bar {
        opacity: 1;
    }
}

/* Touch devices: always visible */
@media (hover: none) {
    .card-action-bar {
        opacity: 1;
    }
}

/* Stack view: match image border-radius */
.stack-card .card-action-bar {
    border-radius: 0 0 9px 9px;
}

/* Game Changer / MLD badges in stack view — smaller, doesn't obscure card name */
.stack-game-changer-badge,
.stack-mld-badge {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
}

.stack-game-changer-badge svg,
.stack-mld-badge svg {
    width: 12px !important;
    height: 12px !important;
}

/* Flip button inside action bar: override round to square */
.card-action-bar .card-flip-btn {
    border-radius: 4px !important;
    width: 26px !important;
    height: 26px !important;
}

/* All buttons in the bar: square, individually blurred, border-only */
.card-action-bar .card-badge,
.card-badge.card-action-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-shrink: 0;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.card-action-bar .card-badge:hover,
.card-badge.card-action-button:hover {
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Active commander/companion: keep accent tint so state is clear */
.card-action-bar .commander-badge.active,
.card-action-bar .companion-badge.active {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Warning badge keeps its danger color */
.card-action-bar .validation-warning-badge {
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    background: rgba(248, 81, 73, 0.15) !important;
}

.card-action-bar .validation-warning-badge:hover {
    background: var(--danger-color) !important;
    color: white !important;
}


/* Card Widget Item - used in Grid view */
.card-widget-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    height: auto !important;
}

.card-widget-item:hover {
    transform: scale(1.03);
    border-color: var(--accent-color);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

.card-widget-item img {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-widget-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.card-widget-info {
    display: flex;
    flex-direction: column;
    min-height: 2.2em;
    justify-content: center;
}

/* Flex row so trailing markers (foil) keep their slot while only the name
   text itself is allowed to ellipsize. */
.card-widget-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
}

.card-widget-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-widget-name > svg {
    flex: 0 0 auto;
}


.card-widget-other-face {
    font-size: 0.75em;
    font-style: italic;
    color: var(--text-muted);
}

/* Row containing the -/count/+ widget and indicator badges.

   Wraps: the badges are fixed-width and `flex-shrink: 0`, so on a narrow tile they used to
   run straight out past the edge of the widget instead of moving to a second line. */
.card-widget-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    min-width: 0;
}

/* Badges inside the actions row: match action bar square button style */
.card-widget-actions-row .card-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-shrink: 0;
    border-radius: 4px !important;
    background: var(--button-bg) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.card-widget-actions-row .card-badge:hover {
    border-color: var(--accent-color) !important;
    background: var(--accent-bg) !important;
    transform: none !important;
}

.card-widget-actions-row .commander-badge.active,
.card-widget-actions-row .companion-badge.active {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

.card-widget-actions-row .validation-warning-badge {
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    background: rgba(248, 81, 73, 0.1) !important;
}

.card-widget-controls {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    width: fit-content;
    margin: 0;
    z-index: 10;
}

.widget-count-group {
    display: flex;
    align-items: center;
    gap: 4px !important;
}


.widget-control-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.15s ease;
}

.widget-control-btn:hover {
    transform: scale(1.1);
}

.widget-control-btn.add:hover {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--success-color);
}

.widget-control-btn.remove:hover {
    background: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.widget-count {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--accent-color);
    min-width: 16px;
    text-align: center;
    user-select: none;
}

/* Unified Card Badge system */
.card-badge {
    position: absolute;
    background: rgba(13, 17, 23, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.card-badge:hover {
    background: var(--accent-color);
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent-glow);
}

.card-badge svg {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.card-badge-round {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.card-badge-pill {
    border-radius: 12px;
    padding: 2px 10px;
    height: 28px;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 36px;
    white-space: nowrap;
}

/* Specific Badge Overrides */
.game-changer-badge,
.mld-badge {
    top: 10px;
    left: 10px;
}

.validation-warning-badge {
    top: 10px;
    right: 10px;
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(248, 81, 73, 0.15);
}

.validation-warning-badge:hover {
    background: var(--danger-color);
    color: white;
}

.commander-badge {
    border-color: var(--accent-color);
    color: white;
}

.commander-badge.active {
    background: var(--accent-color);
    color: white;
}

.commander-badge:hover {
    background: var(--accent-color);
    color: white;
}

.companion-badge {
    border-color: var(--accent-color);
    color: white;
}

.companion-badge.active {
    background: var(--accent-color);
    color: white;
}

.companion-badge:hover {
    background: var(--accent-color);
    color: white;
}

.stack-card-count-badge {
    top: 10px;
    right: 10px;
    font-family: 'Inter', sans-serif;
    background: rgba(13, 17, 23, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Shift count badge container up/right in stack view so it clears the mana cost */
.stack-card .card-indicators-top-right {
    top: -10px;
    right: -10px;
}

/* Filtered stack cards switch from an overlapping stack to a spaced result
   list. Their absolute badges must not remain visible or escape to another
   positioned ancestor while that layout is changing. */
.stack-card-filtered > .card-indicators-top-left,
.stack-card-filtered > .card-indicators-top-right {
    display: none !important;
}

/* Indicator Containers for automatic stacking */
.card-indicators-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    z-index: 20;
    pointer-events: none;
    /* Let clicks through to buttons if needed, but badges are buttons */
}

.card-indicators-top-left {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 20;
    pointer-events: none;
}

.card-indicators-top-right>*,
.card-indicators-top-left>* {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    pointer-events: auto;
}

/* Unified Flip Button for double-faced cards */
.card-flip-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.card-flip-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: scale(1.1);
}

.card-flip-btn-small {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.deck-card-preview-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
}

.deck-card-preview-image .card-action-bar {
    opacity: 1;
}

/* Position flip button in detailed panels (Synergy/Genome) to top-left */
.card-detail-panel .card-flip-btn {
    top: -10px !important;
    left: -10px !important;
    z-index: 30 !important;
    position: absolute !important;
}


.price-label {
    color: var(--text-muted);
}

.price-value {
    font-weight: bold;
    color: var(--text-color);
}

.format-name {
    font-weight: bold;
}

.status-text {
    text-transform: capitalize;
}

/* Invalid Card Indicator */
.card-invalid {
    box-shadow: 0 0 15px 3px var(--danger-bg) !important;
    border: 2px solid var(--danger-color) !important;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--popup-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 180px;
    z-index: 2000;
    box-shadow: 0 4px 20px var(--popup-shadow);
}

.context-menu-item {
    padding: 8px 16px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-item:hover {
    background: var(--accent-hover);
    color: var(--text-color);
}

.context-menu-item.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background: transparent;
}

/* Card Detail Panel Preview Image Wrapper */
.card-image-wrapper {
    /* Wrapper just contains the image */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

.card-image-wrapper:hover {
    z-index: 10;
}

/* Card Image itself */
.card-preview-image {
    position: static !important;
    /* Override position: absolute from components.css */
    width: 160px;
    /* Explicit base width */
    max-width: 160px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-image-wrapper:hover .card-preview-image {
    width: 350px;
    /* Explicit hover width */
    max-width: 350px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

/* Mobile: Disable hover growth - use click to open modal instead */
@media (max-width: 768px) {
    .card-image-wrapper:hover .card-preview-image {
        width: 160px;
        max-width: 160px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

/* Mobile: Compact - / count / + widget so card names have more room */
@media (max-width: 768px) {
    .card-widget-item {
        padding: 7px;
        overflow: hidden;
    }

    .card-widget-footer {
        gap: 6px;
        margin-top: 8px;
    }

    .card-widget-info {
        min-height: 0;
    }

    .card-widget-name {
        font-size: 0.82em;
    }

    .card-widget-actions-row {
        flex-wrap: wrap;
        gap: 5px;
    }

    .card-widget-controls {
        padding: 1px;
    }

    .widget-count-group {
        gap: 1px !important;
    }

    .widget-control-btn {
        width: 18px;
        height: 18px;
        font-size: 14px;
    }

    .widget-count {
        font-size: 0.75em;
        min-width: 14px;
    }
}

/* Salt Badge (Popup) */
.salt-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--widget-bg);
    border: 1px solid;
    border-radius: 8px;
    width: 100%;
    margin-top: 4px;
}

.salt-badge-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.salt-badge-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.salt-badge.no-data {
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.6;
}

.salt-badge.no-data .salt-badge-value,
.salt-badge.no-data .salt-badge-label {
    color: var(--text-muted) !important;
}

/* Foil Effect Overlay */
.card-image-container.foil img {
    filter: saturate(1.15) contrast(1.1) brightness(1.05);
}

.card-image-container.foil::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 15%,
            rgba(255, 0, 255, 0.15) 30%,
            rgba(0, 255, 255, 0.15) 50%,
            rgba(255, 255, 0, 0.15) 70%,
            rgba(255, 255, 255, 0.1) 85%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 300% 300%;
    animation: foilShimmer 4s infinite linear;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: color-dodge;
    border-radius: inherit;
    opacity: 0.9;
}

.card-image-container.foil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 4;
}

@keyframes foilShimmer {
    0% {
        background-position: 0% 0%;
    }

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

/* Foil overlay for stack-view cards (deck + collection) — mirrors the shimmer
   used on grid images so foil lots read as physically foil. */
.stack-card.card-foil > img {
    filter: saturate(1.15) contrast(1.1) brightness(1.05);
}

.stack-card.card-foil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 15%,
            rgba(255, 0, 255, 0.15) 30%,
            rgba(0, 255, 255, 0.15) 50%,
            rgba(255, 255, 0, 0.15) 70%,
            rgba(255, 255, 255, 0.1) 85%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 300% 300%;
    animation: foilShimmer 4s infinite linear;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: color-dodge;
    border-radius: inherit;
    opacity: 0.9;
}

/* --- Narrow card tiles ---

   Shed information in order of what a reader can most easily do without, rather than letting
   the footer wrap into an unreadable stack or clip mid-word. The card name always survives:
   it is the one thing that identifies the tile once the art is too small to read. */
@container (max-width: 165px) {
    .card-widget-name {
        font-size: 0.82em;
    }

    /* The collector number is the first thing to go: it identifies a printing the reader is
       not choosing between at this size, while the set symbol and the price are both still
       worth a glance. */
    .card-meta-cluster--grid .card-meta-number {
        display: none;
    }
}

@container (max-width: 132px) {
    /* The set symbol says the same thing as the set code in less space, so the code goes and
       the symbol stays. */
    .card-meta-cluster--grid .card-meta-set {
        display: none;
    }

    .card-widget-name {
        font-size: 0.76em;
    }

    .card-widget-info {
        min-height: 1.8em;
    }

    /* The second face of a DFC is a detail, not an identifier. */
    .card-widget-other-face {
        display: none;
    }
}

@container (max-width: 108px) {
    /* At this size the tile is a thumbnail, and what survives is the pair a reader actually
       scans a wall of cards for: which set it is from, and what it costs. Everything else has
       already been shed by the wider breakpoints above. */
    .card-meta-cluster--grid .card-meta-owner {
        display: none;
    }

    /* Symbol hard left, price hard right, with the gap between them doing the separating. */
    .card-meta-cluster--grid {
        justify-content: space-between;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .card-meta-cluster--grid .card-meta-symbol {
        flex: 0 0 auto;
        margin-right: auto;
    }

    .card-meta-cluster--grid .card-meta-price {
        flex: 0 0 auto;
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-widget-footer {
        gap: 4px;
        margin-top: 6px;
    }
}