/* --- VISUAL BUTTON FILTERS SYSTEM --- */
.filter-btn {
    width: 100px;
    border: 0px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.filter-btn:hover {
    transform: translateY(-2px);
}

.filter-card-frame {
    width: 100%;
    aspect-ratio: 1 / 1.46; /* Perfect YGO layout ratio */
    border: 0px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
    transition: border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* Card image is dimmed out and greyscale by default when inactive */
.filter-btn .filter-card-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(40%);
    transition: filter 0.2s ease;
}

.filter-card-label {
    font-size: 0.65rem;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

/* --- STATE STYLES: Active / Selected Hand Buttons --- */
.hand-filter-btn.active .filter-card-frame {
    border-color: #f6ad55; /* Warning Gold Accent */
    box-shadow: 0 0 12px rgba(246, 173, 85, 0.4);
}
.hand-filter-btn.active .filter-card-frame img {
    filter: grayscale(0%) brightness(100%);
}
.hand-filter-btn.active .filter-card-label {
    color: #f6ad55;
    font-weight: bold;
}

/* --- STATE STYLES: Active / Selected Deck Buttons --- */
.deck-filter-btn.active .filter-card-frame {
    border-color: #63b3ed; /* Info Blue Accent */
    box-shadow: 0 0 12px rgba(99, 179, 237, 0.4);
}
.deck-filter-btn.active .filter-card-frame img {
    filter: grayscale(0%) brightness(100%);
}
.deck-filter-btn.active .filter-card-label {
    color: #63b3ed;
    font-weight: bold;
}