/* ── Grid: fixed-size cards, no stretching ── */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--card-width));
    gap: 14px;
    justify-content: center;
}

/* ── Base card ── */
.mod-card {
    --card-frame-light: #2a3550;
    --card-frame-dark: #0d1220;
    --card-header-padding: 6px 10px;
    --card-body-padding: 8px 10px;
    width: var(--card-width);
    height: var(--card-height);
    background: var(--bg-card);
    border-radius: var(--surface-radius);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    position: relative;
    /* 3D beveled border */
    border: 4px solid;
    border-color: var(--card-frame-light) var(--card-frame-dark) var(--card-frame-dark) var(--card-frame-light);
    /* Subtle drop shadow */
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

/* hover/selected states moved after card class themes for specificity */

/* Mob battlefield minimap */
.mod-card .minimap-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

.mod-card.mod-type-mob .mob-info-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 34%;
    padding: 18px 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.76) 70%, transparent);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.mod-card.mod-type-mob .mob-info-overlay .mod-desc {
    font-family: 'BN6Thin', sans-serif;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    margin: 0;
}

.mod-card.mod-type-mob .mob-lower-panel {
    flex: none;
    min-height: 74px;
    max-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: auto 8px 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid;
    border-color: var(--card-frame-dark) var(--card-frame-light) var(--card-frame-light) var(--card-frame-dark);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04), inset -1px -1px 0 rgba(0,0,0,0.35);
}

.mod-card.mod-type-mob .minimap-wrap {
    flex: 0 0 auto;
    padding: 0 4px;
}

.mod-card.mod-type-mob .battlefield-minimap {
    width: 84px;
    height: auto;
}

.mod-card.mod-type-mob .mob-stats-table {
    flex: 0 0 84px;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
    font-family: 'BN6Small', monospace;
    font-size: 12px;
    color: var(--text-primary);
}

.mod-card.mod-type-mob .mob-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.mod-card.mod-type-mob .mob-stats-key {
    color: var(--text-secondary);
}

.mod-card.mod-type-mob .mob-stats-value {
    color: var(--text-primary);
}

/* ── Preview area ── */
.mod-card .preview-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    min-height: 0;
}

.mod-card .preview-area img,
.mod-card .battlefield-minimap,
.mod-card .element-icon,
.mod-card .block-preview {
    image-rendering: pixelated;
}

.mod-card .preview-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Info area (default for card/mob/block) ── */
.mod-card .info-area {
    padding: var(--card-body-padding);
}

.mod-card .minimap-wrap,
.mod-card .info-area,
.mod-card .name-bar,
.mod-card.mod-type-card .card-desc {
    background: var(--bg-card);
}

.mod-card .mod-name,
.mod-card .mod-desc,
.mod-card .name-bar-codes {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mod-card .mod-name {
    font-family: 'BN6Bold', sans-serif;
    font-size: 20px;
    color: var(--text-primary);
}

.mod-card .mod-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.mod-card .element-icon {
    width: 20px;
    height: 20px;
}

/* ── Name bar at top (all mod types) ── */
.mod-card .name-bar,
.mod-card.mod-type-card .card-bottom-bar {
    display: flex;
    gap: 6px;
}

.mod-card .name-bar {
    padding: var(--card-header-padding);
    align-items: baseline;
}

/* Bevel border between name-bar and chip art */
.mod-card.mod-type-card .name-bar {
    border-bottom: 2px solid #0d1220;
}

.mod-card .name-bar .mod-name {
    flex-shrink: 1;
    min-width: 0;
}

.mod-card .name-bar-codes {
    font-family: 'BN6Small', monospace;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Card art: fixed height (3× 48px canonical chip art = 144px), top-aligned */
.mod-card.mod-type-card .preview-area {
    flex: none;
    height: 144px;
    align-items: flex-start;
    position: relative;
}

/* Mob art: fixed height (2× 80px typical sprite = 160px) */
.mod-card.mod-type-mob .preview-area {
    flex: none;
    height: 172px;
    position: relative;
    margin: 4px 8px 6px;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid;
    border-color: var(--card-frame-dark) var(--card-frame-light) var(--card-frame-light) var(--card-frame-dark);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04), inset -1px -1px 0 rgba(0,0,0,0.35);
}

.mod-card.mod-type-block .preview-area {
    flex: none;
    height: 154px;
    padding: 8px 10px 4px;
    background: var(--bg-card);
}

.mod-card.mod-type-block .info-area {
    flex: 1;
    padding: var(--card-header-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mod-card.mod-type-block .mod-desc {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 1.35;
}

/* Description under art */
.mod-card.mod-type-card .card-desc {
    flex: 1;
    padding: var(--card-header-padding);
    font-family: 'BN6Thin', sans-serif;
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    white-space: normal;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Bottom bar: element + damage side by side */
.mod-card.mod-type-card .card-bottom-bar {
    align-items: center;
    padding: 5px 10px;
    background: rgba(33, 54, 40, 0.137);
    border-top: 2px solid #2a3550;
}

.mod-card .damage-inline {
    font-family: 'BN6Bold', sans-serif;
    font-size: 18px;
}

/* Card class color themes */
.mod-card.Mega {
    --bg-card: #162848;
    --card-frame-light: #3a5080;
    --card-frame-dark: #0e1830;
}
.mod-card.Giga {
    --bg-card: #221f35;
    --card-frame-light: #3a2a50;
    --card-frame-dark: #150e20;
}
.mod-card.Dark {
    --bg-card: #1a1030;
    --card-frame-light: #2a1555;
    --card-frame-dark: #100825;
}

/* Hover/selected states (after card class themes so they win at equal specificity) */
.mod-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.mod-card.selected {
    border-color: var(--success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.mod-card.mod-type-player .preview-area {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mod-card.mod-type-player .preview-area img {
    object-fit: cover;
    object-position: center top;
}

.mod-card.mod-type-player .player-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    z-index: 2;
    text-align: center;
}

.mod-card.mod-type-player .player-name-overlay .mod-name {
    font-size: 22px;
    color: #000;
    text-shadow:
        0 0 2px rgba(255,255,255,1),
        0 0 4px rgba(255,255,255,1),
        0 0 7px rgba(255,255,255,1);
}

.mod-card.mod-type-player .player-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    padding: 20px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 75%, transparent);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mod-card.mod-type-player .player-info-text {
    font-family: 'BN6Thin', sans-serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    overflow: hidden;
    margin: 0;
}

/* ── Block preview canvas ── */
.mod-card .block-preview-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    border: 3px solid;
    border-color: var(--card-frame-dark) var(--card-frame-light) var(--card-frame-light) var(--card-frame-dark);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04), inset -1px -1px 0 rgba(0,0,0,0.35);
}

.mod-card .block-preview {
    width: 140px;
    height: 140px;
}

/* ── Damage color thresholds ── */
.damage-low { color: #ffffff; }
.damage-mid { color: #ffff7d; }
.damage-high { color: #ff7878; }
.damage-mega { color: #be78e6; }
.damage-giga { color: #000000; text-shadow: 1px 1px 0 #c8c8c8; }