:root {
    --mint-filter: brightness(1.1) contrast(1.1);
    --vg-filter: sepia(0.2) contrast(0.9) brightness(0.9);
    --fair-filter: sepia(0.5) contrast(0.8) brightness(0.8) grayscale(0.2);
}

/* --- GRADING FILTERS --- */

/* Mint: Bright and Sharp */
.grade-mint { 
    filter: brightness(1.1) contrast(1.1); 
    border: none !important;
    box-shadow: none !important;
}

/* Very Good: Slightly faded/yellowed */
.grade-very-good { 
    filter: sepia(0.3) contrast(0.9) brightness(0.9); 
    border: none !important; /* Changed from 3px solid #c0c0c0 */
}

/* Fair: Old, dark, and slightly blurry/distorted */
.grade-fair { 
    filter: sepia(0.8) contrast(0.7) brightness(0.7) blur(0.3px); 
    border: none !important; /* Changed from 3px solid #8b4513 */
    /* We use opacity instead of mask-image to ensure visibility if texture is missing */
    background-color: rgba(139, 69, 19, 0.1); 
}

/* Good: Slightly better than Fair, less blur */
.grade-good { 
    filter: sepia(0.5) contrast(0.85) brightness(0.85); 
    border: none !important;
}

/* Very Fine: Close to Mint, but a tiny bit less bright */
.grade-very-fine { 
    filter: brightness(1.05) contrast(1.05) sepia(0.05); 
    border: none !important;
}

/* Ensure images always have a block display to prevent layout collapse */
#overlay-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
}

/* Layout */
#game-container { display: flex; font-family: sans-serif; }
#stats-panel { width: 300px; padding: 20px; background: #eee; height: 100vh; }
#collection-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }

.series-card { border: 1px solid #ccc; padding: 10px; cursor: pointer; text-align: center; }
.series-card img { width: 100%; height: auto; }

/* This MUST be at the top to ensure it's defined */
.hidden { 
    display: none !important; 
}

/* --- OVERLAY CORE --- */
#overlay-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Start at top so scrolling works */
    padding-top: 50px;
    overflow-y: auto;
}

#overlay-content {
    background: white;
    width: 90%;
    max-width: 1100px;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 50px; /* Space at bottom for scrolling */
}

/* --- THE GRID --- */
.results-grid {
    display: grid;
    gap: 25px;
    width: 100%;
    /* Ensure the grid doesn't restrict height */
    grid-auto-rows: min-content; 
}

.grid-1-box { grid-template-columns: repeat(3, 1fr); }
.grid-3-box { grid-template-columns: repeat(3, 1fr); }
.grid-5-box { grid-template-columns: repeat(5, 1fr); }

/* --- THE IMAGE FIX --- */
.result-item {
    width: 100%;
    display: block; /* Removed flex to prevent squashing */
}

.result-item img {
    width: 100% !important;
    height: auto !important; /* Forces the browser to calculate height based on width */
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.comic-info {
    text-align: center;
    padding: 10px 0;
}

/* Ensure the grid doesn't squash items */
.results-grid {
    display: grid;
    gap: 15px;
    align-content: start; /* Align items to the top */
}

/* Add this to ensure images grow vertically correctly */
.result-item img, 
.series-gallery img,
.gallery-item img {
    width: 100% !important;
    height: auto !important; /* Forces vertical growth */
    display: block !important;
    object-fit: contain !important;
    max-height: none !important; /* Prevents squashing */
}

/* Ensure the result-item (the container) doesn't have a fixed height */
.result-item {
    height: auto !important;
    display: flex;
    flex-direction: column;
}

/* Special Variant Styles */
.variant-bronze { border: 4px solid #cd7f32 !important; box-shadow: 0 0 15px #cd7f32; animation: bronze-shimmer 2s infinite alternate !important; /* Added Animation */}
.variant-silver { border: 4px solid #c0c0c0 !important; box-shadow: 0 0 15px #c0c0c0; animation: silver-shimmer 2s infinite alternate !important; /* Added Animation */}
.variant-gold { border: 4px solid #ffd700 !important; box-shadow: 0 0 20px #ffd700; animation: gold-shimmer 2s infinite alternate !important; /* Added Animation */}
.variant-holographic { 
    border: 4px solid #00d4ff !important; 
    box-shadow: 0 0 25px #00d4ff;
    animation: holo-shimmer 2s infinite alternate;
}

/* Bronze: Shifts between deep bronze and a lighter copper */
@keyframes bronze-shimmer {
    from { filter: sepia(1) hue-rotate(-15deg) brightness(1); }
    to { filter: sepia(1) hue-rotate(10deg) brightness(1.4); }
}

/* Silver: Shifts between a dull grey and a bright white-silver */
@keyframes silver-shimmer {
    from { filter: grayscale(1) brightness(0.9); }
    to { filter: grayscale(1) brightness(1.5); }
}

/* Gold: Shifts between a deep goldenrod and a bright yellow-gold */
@keyframes gold-shimmer {
    from { filter: sepia(1) hue-rotate(5deg) brightness(1); }
    to { filter: sepia(1) hue-rotate(25deg) brightness(1.5); }
}

@keyframes holo-shimmer {
    from { filter: hue-rotate(0deg) brightness(1); }
    to { filter: hue-rotate(360deg) brightness(1.3); }
}

/* Tabs UI */
.tab-container { display: flex; gap: 5px; margin-bottom: 15px; justify-content: center; }
.tab-btn { padding: 10px; cursor: pointer; border: none; background: #ddd; border-radius: 5px; }
.tab-btn.active { background: #3498db; color: white; }