body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: lightgrey;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 100vh;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

#main-logo {
    position: relative;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 483.5px; /* 967px / 2 */
    height: 405px; /* 810px / 2 */
    max-width: 90%;
    object-fit: contain;
    z-index: 10; 
    transform: translateZ(0); 
}

/* --- Links Filter Buttons and Label (Reduced by ~30%) --- */
.links-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Reduced gap */
    margin-bottom: 10px; /* Reduced margin */
    padding: 7px; /* Reduced padding */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Reduced border-radius */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    position: relative; 
    z-index: 5; 
}

.links-filter-label {
    font-size: 0.84em; /* Reduced by ~30% from 1.2em */
    font-weight: bold;
    color: #333;
    margin-right: 10px; /* Reduced margin */
    white-space: nowrap;
}

/* --- Rarity Filter Buttons and Label (Reduced by ~30%) --- */
.rarity-filter-label {
    font-size: 0.84em; /* Reduced by ~30% from 1.2em */
    font-weight: bold;
    color: #333; 
    margin-right: 10px; /* Reduced margin */
    white-space: nowrap; 
}

.rarity-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    gap: 10px; /* Reduced gap */
    /* CRUCIAL FIX: Increased margin-bottom for more spacing */
    margin-bottom: 60px; 
    padding: 7px; /* Reduced padding */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Reduced border-radius */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    position: relative; 
    z-index: 5; 
}

/* Unified styling for both rarity and link buttons (Reduced by ~30%) */
.rarity-button, .button-link { /* Removed .pagination-button */
    background-color: #dc6563; 
    color: white;
    border: none;
    border-radius: 6px; /* Reduced border-radius */
    padding: 7px 10px; /* Reduced padding */
    min-height: 35px; /* New min-height (50px * 0.7) */
    box-sizing: border-box; 
    font-size: 0.7em; /* Reduced by ~30% from 1em */
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 6px; /* Reduced gap */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Reduced shadow */
    text-decoration: none; 
    transform: translateZ(0); 
}

.rarity-button:hover, .button-link:hover { /* Removed pagination hover styles */
    background-color: #e67d7a; 
    transform: translateY(-1px); /* Reduced translateY */
}

.rarity-button.active { 
    background-color: #a9c739; 
    box-shadow: 0 2px 7px rgba(169, 199, 57, 0.5); /* Reduced shadow */
}

/* Removed specific pagination button styles */
/* .pagination-button:disabled { ... } */


.rarity-button img {
    width: 26.25px; /* 37.5px * 0.7 */
    height: 21px; /* 30px * 0.7 */
    object-fit: contain;
    flex-shrink: 0; 
}


.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding-bottom: 40px; /* Reverted to original for overall page bottom padding */
    min-height: 500px; /* Keep minimum height to prevent jumping */
}

.card {
    width: 300px;
    height: 418px; 
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    transform-origin: center center;
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

.card.hidden {
    display: none !important; 
    opacity: 0;
    transform: scale(0.8);
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}


.card .js-tilt-glare {
    border-radius: 20px;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.5;
    pointer-events: none;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transform: translateZ(0);
}

/* --- Modal/Enlarged Card Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.enlarged-card-wrapper {
    position: relative;
    max-width: min(90vw, calc(90vh * (745 / 1040))); 
    max-height: min(90vh, calc(90vw * (1040 / 745))); 

    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay.active .enlarged-card-wrapper {
    transform: scale(1);
    opacity: 1;
}

.enlarged-card {
    width: 100%; 
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
    background: transparent;
    position: relative;
    cursor: default;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enlarged-card .card-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
}

.close-button {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #ff3366;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.close-button:hover {
    background-color: #e60039;
}