/* dex/css/dex.css */
/* Combined & Enhanced Styles for Pokedex App - v2 */

/* ==========================================================================
   1. Base & Variables
   ========================================================================== */
   :root {
    /* Color Palette */
    --color-primary: #ef4444; /* Red-500 */
    --color-secondary: #f97316; /* Orange-500 */
    --color-accent: #fffb00; /* Blue-500 */
    --color-focus: var(--color-accent);
    --color-bg-dark: #0f172a; /* Slate-900 */
    --color-bg-panel: #1e293b; /* Slate-800 */
    --color-bg-light-panel: #334155; /* Slate-700 */
    --color-text-primary: #f1f5f9; /* Slate-100 */
    --color-text-secondary: #94a3b8; /* Slate-400 */
    --color-border: #475569; /* Slate-600 */
    --color-border-light: #64748b; /* Slate-500 */
    --color-error: #dc2626; /* Red-600 */
    --color-success: #16a34a; /* Green-600 */
    --color-warning: #f59e0b; /* Amber-500 */

    
     /* Gen Colors */
    --gen-color-all: #64748b; /* Slate-500 */
    --gen-color-1: #ef4444; /* Red-500 */
    --gen-color-2: #f97316; /* Orange-500 */
    --gen-color-3: #eab308; /* Yellow-500 */
    --gen-color-4: #22c55e; /* Green-500 */
    --gen-color-5: #0ea5e9; /* Sky-500 */
    --gen-color-6: #6366f1; /* Indigo-500 */
    --gen-color-7: #ec4899; /* Pink-500 */
    --gen-color-8: #a855f7; /* Purple-500 */
    --gen-color-9: #0d9488; /* Emerald-600 */

    /* Type Colors */
    --type-normal: #A8A77A; --type-normal-rgb: 168, 167, 122;
    --type-fire: #EE8130; --type-fire-rgb: 238, 129, 48;
    --type-water: #6390F0; --type-water-rgb: 99, 144, 240;
    --type-electric: #F7D02C; --type-electric-rgb: 247, 208, 44;
    --type-grass: #7AC74C; --type-grass-rgb: 122, 199, 76;
    --type-ice: #96D9D6; --type-ice-rgb: 150, 217, 214;
    --type-fighting: #C22E28; --type-fighting-rgb: 194, 46, 40;
    --type-poison: #A33EA1; --type-poison-rgb: 163, 62, 161;
    --type-ground: #E2BF65; --type-ground-rgb: 226, 191, 101;
    --type-flying: #A98FF3; --type-flying-rgb: 169, 143, 243;
    --type-psychic: #F95587; --type-psychic-rgb: 249, 85, 135;
    --type-bug: #A6B91A; --type-bug-rgb: 166, 185, 26;
    --type-rock: #B6A136; --type-rock-rgb: 182, 161, 54;
    --type-ghost: #735797; --type-ghost-rgb: 115, 87, 151;
    --type-dragon: #6F35FC; --type-dragon-rgb: 111, 53, 252;
    --type-dark: #705746; --type-dark-rgb: 112, 87, 70;
    --type-steel: #B7B7CE; --type-steel-rgb: 183, 183, 206;
    --type-fairy: #D685AD; --type-fairy-rgb: 214, 133, 173;

    /* Lighter Type Colors */
    --type-normal-light: #c6c6a7; --type-fire-light: #f5ac78; --type-water-light: #9db7f5;
    --type-electric-light: #fae078; --type-grass-light: #a7db8d; --type-ice-light: #bcecec;
    --type-fighting-light: #d67873; --type-poison-light: #c183c0; --type-ground-light: #ebd69d;
    --type-flying-light: #c6b7f5; --type-psychic-light: #fa92b2; --type-bug-light: #c6d16e;
    --type-rock-light: #d1c17d; --type-ghost-light: #a292bc; --type-dragon-light: #a27dfa;
    --type-dark-light: #a18778; --type-steel-light: #d1d1e0; --type-fairy-light: #f4b1c6;

    /* Darker Type Colors */
    --type-normal-dark: #8a895e; --type-fire-dark: #c6631a; --type-water-dark: #3b74d4;
    --type-electric-dark: #d1ae0e; --type-grass-dark: #5a9e2f; --type-ice-dark: #6ec4c0;
    --type-fighting-dark: #9c1f1a; --type-poison-dark: #832f81; --type-ground-dark: #bb9d40;
    --type-flying-dark: #8a69d7; --type-psychic-dark: #d32a61; --type-bug-dark: #87990b;
    --type-rock-dark: #9a861c; --type-ghost-dark: #583f7a; --type-dragon-dark: #4d13d1;
    --type-dark-dark: #584536; --type-steel-dark: #9a9aae; --type-fairy-dark: #b0648f;

    /* TCG Type Colors */
    --tcg-type-Colorless: #A8A77A; --tcg-type-Darkness: #705746; --tcg-type-Dragon: #6F35FC;
    --tcg-type-Fairy: #D685AD; --tcg-type-Fighting: #C22E28; --tcg-type-Fire: #EE8130;
    --tcg-type-Grass: #7AC74C; --tcg-type-Lightning: #F7D02C; --tcg-type-Metal: #B7B7CE;
    --tcg-type-Psychic: #F95587; --tcg-type-Water: #6390F0;

    /* Dynamic variables (set by JS) */
    --gradient-color-1: var(--color-secondary);
    --gradient-color-2: var(--color-primary);
    --dynamic-type-color: var(--color-accent); /* Fallback for detail view elements */
    --dynamic-type-color-light: var(--color-accent);
    --breathe-glow-color: var(--color-accent); /* Fallback hex/var for glow */
    --breathe-glow-color-rgb: 59, 130, 246; /* Fallback RGB for glow (blue-500) */
    --card-gradient-color-1: var(--color-bg-light-panel); /* Fallback for card gradient */
    --card-gradient-color-2: var(--color-bg-panel);

    /* Animation Timings */
    --animation-speed-fast: 0.2s;
    --animation-speed-normal: 0.3s;
    --animation-speed-slow: 0.5s;
}

/* ==========================================================================
   2. Base Styles & Font Imports
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    margin: 0;
    padding: 1rem; /* Basic padding */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--color-bg-dark); }
body::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 5px; border: 2px solid var(--color-bg-dark); }
body::-webkit-scrollbar-thumb:hover { background-color: var(--color-border-light); }

.container {
    width: 95%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.hidden { display: none !important; }
.visible { visibility: visible; opacity: 1; } /* For transitions */

.font-pirata { font-family: 'Pirata One', cursive; }

/* ==========================================================================
   3. Loading Styles
   ========================================================================== */
.initial-loading-overlay {
    position: fixed; inset: 0;
    background-color: var(--color-bg-dark);
    z-index: 9999; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 1; visibility: visible;
    transition: opacity var(--animation-speed-slow) ease-out, visibility 0s linear var(--animation-speed-slow);
}
.initial-loading-overlay.loaded {
    opacity: 0; visibility: hidden;
    transition-delay: 0s, 0s; /* Hide immediately after opacity transition */
    pointer-events: none;
}
.loaderBody { width: 90%; max-width: 25em; padding: 1rem; }
.progress {
    width: 100%; background-color: var(--color-bg-light-panel);
    border: 1px solid var(--color-border); position: relative;
    height: 1.5em; display: flex; align-items: center; justify-content: center;
    border-radius: 0.75em; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1);
}
.progressBar {
    width: 100%;
    background: linear-gradient(120deg, var(--color-primary) 5%, var(--color-secondary) 95%);
    height: inherit; position: absolute; top: 0; left: 0;
    transform: translateX(-100%);
    animation: loadingAnimation 2s ease-in-out infinite;
    transition: transform var(--animation-speed-normal) cubic-bezier(0.25, 1, 0.5, 1);
}
.loader-text {
    position: relative; z-index: 1; display: flex; flex-direction: row;
    font-weight: 600; color: var(--color-text-primary);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); font-size: 0.85rem; letter-spacing: 1px;
}
.element {
    animation: pulse 1.5s ease-in-out infinite alternate;
    display: inline-block; margin: 0 1px;
}
.element:nth-child(n) { animation-delay: calc(var(--index, 1) * 60ms); }

/* Subsequent Loaders (Grid, TCG, Detail) */
.subsequent-loader {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    padding: 2rem; background-color: rgba(var(--color-bg-panel-rgb, 30, 41, 59), 0.8); /* Use RGB for opacity */
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border-radius: 0.5rem; z-index: 10; color: var(--color-text-primary);
    position: absolute; inset: 0;
    opacity: 1; visibility: visible;
    transition: opacity var(--animation-speed-fast) ease, visibility 0s linear;
}
.subsequent-loader.hidden {
    opacity: 0; visibility: hidden;
    transition: opacity var(--animation-speed-fast) ease, visibility 0s linear var(--animation-speed-fast);
    pointer-events: none;
}
.spinner {
    width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; border-top-color: var(--color-primary);
    animation: spin 1s linear infinite; margin-right: 0.75rem;
}
.spinner-sm { width: 24px; height: 24px; border-width: 3px; margin-right: 0.5rem; }
.spinner-lg { width: 60px; height: 60px; border-width: 5px; margin-right: 1rem; }
.subsequent-loader p { font-size: 1rem; font-weight: 500; }
.subsequent-loader .spinner-sm + p { font-size: 0.85rem; }

/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */
header {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 1rem; margin-bottom: 1.5rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);
}
header h1 {
    font-family: 'Pirata One', cursive; font-size: 2.25rem; line-height: 1.1;
    text-shadow: 0 0 5px rgba(255, 100, 100, 0.7), 0 0 10px rgba(255, 0, 0, 0.6), 0 0 15px rgba(138, 43, 226, 0.5);
    color: var(--color-primary); margin: 0;
    animation: text-flicker 3s linear infinite alternate; flex-shrink: 0;
}

.header-controls { display: flex; align-items: center; gap: 0.75rem; flex-grow: 1; justify-content: flex-end; }
.search-container { position: relative; flex-grow: 1; max-width: 50px; }
#pokemon-search-main {
    background-color: rgba(30, 41, 59, 0.8); color: var(--color-text-primary);
    border: 1px solid var(--color-border); border-radius: 0.375rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; font-size: 0.875rem;
    min-width: 300px; /* Added to ensure the placeholder text is fully visible */
    width: auto; /* Added to allow the search bar to grow with available space */
}
#pokemon-search-main:focus { outline: none; border-color: var(--color-focus-border); box-shadow: 0 0 0 2px var(--color-focus); }
#search-button-main {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    color: var(--color-text-secondary); background: none; border: none;
    padding: 0.25rem; cursor: pointer; transition: color var(--animation-speed-fast);
}
#search-button-main:hover { color: var(--color-accent); }
#random-pokemon-button {
    background-color: var(--color-accent); color: var(--color-bg-dark); font-weight: 600;
    padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; cursor: pointer;
    transition: all var(--animation-speed-fast) ease; display: inline-flex; align-items: center;
    gap: 0.5rem; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#random-pokemon-button:hover { background-color: #facc15; /* yellow-400 */ transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
#random-pokemon-button:active { transform: translateY(0px); background-color: #eab308; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); } /* Press effect */

/* --- Tabs/Filters --- */
#generation-tabs, #type-filter-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.gen-tab-button, .type-filter-button {
    background-color: var(--color-bg-light-panel); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: 0.375rem;
    padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: all var(--animation-speed-fast) ease; white-space: nowrap;
}
.gen-tab-button:hover, .type-filter-button:hover { background-color: var(--color-bg-panel); color: var(--color-text-primary); border-color: var(--color-border-light); transform: translateY(-1px); }
.gen-tab-button:active, .type-filter-button:active { transform: scale(0.98); background-color: var(--color-border); } /* Press effect */
nav#generation-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Added to create a 5-column grid */
    gap: 8px; /* Added to create space between buttons */
}

/* Default styles for generation tabs */
.gen-tab-button {
    background-color: var(--color-bg-light-panel); /* Default background */
    color: var(--color-text-secondary); /* Default text color */
    border: 1px solid var(--color-border); /* Default border */
    transition: all var(--animation-speed-fast) ease; /* Smooth transition */
}

/* Active state for generation tabs */
.gen-tab-button.active {
    color: white; /* Text color for active tabs */
    border-color: transparent; /* Remove border for active tabs */
    box-shadow: 0 0 0 2px var(--color-bg-dark), 0 0 0 4px currentColor; /* Highlight effect */
}

.gen-tab-button {
    border-radius: 6px; /* Re-added to make buttons rounded */
    flex-grow: 1; /* Added to allow the buttons to grow */
    width: auto;
}
#type-filter-buttons {
    display: grid; /* Added to create a grid container */
    grid-template-columns: repeat(6, 1fr); /* Added to create a 6-column grid */
    gap: 8px; /* Added to create space between buttons */
}

.type-filter-button {
    flex-grow: 1; /* Added to allow the buttons to grow */
    width: auto; /* Added to allow the buttons to adjust to the grid */
}
.gen-tab-button.active {
    background-color: var(--color-primary); color: white; border-color: var(--color-primary);
    font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.type-filter-button.active {
    color: white; font-weight: 600;
    background-color: var(--type-color-base, var(--color-primary)); /* Set by JS */
    border-color: transparent; /* Remove border */
    box-shadow: 0 0 0 2px var(--color-bg-dark), 0 0 0 4px var(--type-color-base, var(--color-primary));
}

/* Unselected Generation Tabs */
.gen-tab-button {
    background-color: var(--color-bg-light-panel); /* Default background */
    color: var(--color-text-secondary); /* Default text color */
    border: 1px solid var(--color-border); /* Default border */
    transition: all var(--animation-speed-fast) ease; /* Smooth transition */
}

/* Apply light tint to unselected generation tabs */
.gen-tab-button[data-generation="1"] { color: rgba(239, 68, 68, 0.6); } /* Light Red */
.gen-tab-button[data-generation="2"] { color: rgba(249, 115, 22, 0.6); } /* Light Orange */
.gen-tab-button[data-generation="3"] { color: rgba(234, 179, 8, 0.6); } /* Light Yellow */
.gen-tab-button[data-generation="4"] { color: rgba(34, 197, 94, 0.6); } /* Light Green */
.gen-tab-button[data-generation="5"] { color: rgba(14, 165, 233, 0.6); } /* Light Sky */
.gen-tab-button[data-generation="6"] { color: rgba(99, 102, 241, 0.6); } /* Light Indigo */
.gen-tab-button[data-generation="7"] { color: rgba(236, 72, 153, 0.6); } /* Light Pink */
.gen-tab-button[data-generation="8"] { color: rgba(168, 85, 247, 0.6); } /* Light Purple */
.gen-tab-button[data-generation="9"] { color: rgba(13, 148, 136, 0.6); } /* Light Emerald */
.gen-tab-button[data-generation="all"] { color: rgba(100, 116, 139, 0.6); } /* Light Slate */

/* Unselected Type Filter Buttons */
.type-filter-button[data-type="normal"] { color: rgba(168, 167, 122, 0.6); } /* Light Normal */
.type-filter-button[data-type="fire"] { color: rgba(238, 129, 48, 0.6); } /* Light Fire */
.type-filter-button[data-type="water"] { color: rgba(99, 144, 240, 0.6); } /* Light Water */
.type-filter-button[data-type="electric"] { color: rgba(247, 208, 44, 0.6); } /* Light Electric */
.type-filter-button[data-type="grass"] { color: rgba(122, 199, 76, 0.6); } /* Light Grass */
.type-filter-button[data-type="ice"] { color: rgba(150, 217, 214, 0.6); } /* Light Ice */
.type-filter-button[data-type="fighting"] { color: rgba(194, 46, 40, 0.6); } /* Light Fighting */
.type-filter-button[data-type="poison"] { color: rgba(163, 62, 161, 0.6); } /* Light Poison */
.type-filter-button[data-type="ground"] { color: rgba(226, 191, 101, 0.6); } /* Light Ground */
.type-filter-button[data-type="flying"] { color: rgba(169, 143, 243, 0.6); } /* Light Flying */
.type-filter-button[data-type="psychic"] { color: rgba(249, 85, 135, 0.6); } /* Light Psychic */
.type-filter-button[data-type="bug"] { color: rgba(166, 185, 26, 0.6); } /* Light Bug */
.type-filter-button[data-type="rock"] { color: rgba(182, 161, 54, 0.6); } /* Light Rock */
.type-filter-button[data-type="ghost"] { color: rgba(115, 87, 151, 0.6); } /* Light Ghost */
.type-filter-button[data-type="dragon"] { color: rgba(111, 53, 252, 0.6); } /* Light Dragon */
.type-filter-button[data-type="dark"] { color: rgba(112, 87, 70, 0.6); } /* Light Dark */
.type-filter-button[data-type="steel"] { color: rgba(183, 183, 206, 0.6); } /* Light Steel */
.type-filter-button[data-type="fairy"] { color: rgba(214, 133, 173, 0.6); } /* Light Fairy */

/* Active state overrides */
.gen-tab-button.active, .type-filter-button.active {
    color: white; /* Override text color for active buttons */
    border-color: transparent; /* Remove border for active buttons */
}

/* ==========================================================================
   5. Pokédex Grid
   ========================================================================== */
#pokedex-grid-container { position: relative; min-height: 400px; }
#pokedex-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pokedex-grid-card {
    background: linear-gradient(145deg, var(--card-gradient-color-1), var(--card-gradient-color-2));
    border-radius: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border);
    transition: transform var(--animation-speed-fast) ease-out, box-shadow var(--animation-speed-fast) ease-out, border-color var(--animation-speed-fast) ease-out;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; overflow: hidden;
    opacity: 0; /* Start hidden for animation */
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.pokedex-grid-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--dynamic-type-color, var(--color-accent));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--dynamic-type-color, var(--color-accent));
}
.pokedex-grid-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pokedex-grid-card.animated { animation: fadeInCard var(--animation-speed-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
/* Stagger card animations */
.pokedex-grid-card:nth-child(6n+1) { animation-delay: 0.05s; } .pokedex-grid-card:nth-child(6n+2) { animation-delay: 0.1s; }
.pokedex-grid-card:nth-child(6n+3) { animation-delay: 0.15s; } .pokedex-grid-card:nth-child(6n+4) { animation-delay: 0.2s; }
.pokedex-grid-card:nth-child(6n+5) { animation-delay: 0.25s; } .pokedex-grid-card:nth-child(6n+6) { animation-delay: 0.3s; }

/* Card Content */
.pokemon-card-header { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.7rem; font-weight: 500; background-color: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.8); padding: 0.1rem 0.4rem; border-radius: 0.25rem; display: flex; align-items: center; gap: 0.25rem; }
.variant-indicator { color: gold; font-size: 0.8rem; }
.pokemon-card-id { font-family: monospace; }
.pokemon-card-img-container { margin-bottom: 0.5rem; height: 96px; display: flex; align-items: center; justify-content: center; }
.pokemon-card-image { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); transition: transform var(--animation-speed-fast) ease; }
.pokedex-grid-card:hover .pokemon-card-image { transform: scale(1.1); }
.pokemon-card-info { margin-top: auto; }
.pokemon-card-name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--color-text-primary); text-transform: capitalize; }
.pokemon-card-types { display: flex; justify-content: center; gap: 0.25rem; flex-wrap: wrap; }
.pokemon-card-type { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; padding: 0.15rem 0.4rem; border-radius: 0.25rem; color: white; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.2); }
/* Type colors applied via classes */
.type-normal { background-color: var(--type-normal); } .type-fire { background-color: var(--type-fire); } .type-water { background-color: var(--type-water); } .type-electric { background-color: var(--type-electric); } .type-grass { background-color: var(--type-grass); } .type-ice { background-color: var(--type-ice); } .type-fighting { background-color: var(--type-fighting); } .type-poison { background-color: var(--type-poison); } .type-ground { background-color: var(--type-ground); } .type-flying { background-color: var(--type-flying); } .type-psychic { background-color: var(--type-psychic); } .type-bug { background-color: var(--type-bug); } .type-rock { background-color: var(--type-rock); } .type-ghost { background-color: var(--type-ghost); } .type-dragon { background-color: var(--type-dragon); } .type-dark { background-color: var(--type-dark); } .type-steel { background-color: var(--type-steel); } .type-fairy { background-color: var(--type-fairy); }

/* --- Breathing/Glow Effect --- */
@keyframes pokedexCardBreathe {
    0%, 100% {
        box-shadow: 0 3px 6px rgba(0,0,0,0.2), /* Base shadow */
                    0 0 8px 2px rgba(var(--breathe-glow-color-rgb, 59, 130, 246), 0.4); /* Subtle glow - Fallback blue */
        transform: scale(1);
    }
    50% {
         box-shadow: 0 6px 12px rgba(0,0,0,0.25), /* Slightly larger base shadow */
                    0 0 15px 5px rgba(var(--breathe-glow-color-rgb, 59, 130, 246), 0.6); /* Brighter/larger glow */
        transform: scale(1.015); /* Slight scale pulse */
    }
}
/* Apply animation to the card when .breathing class is added by JS */
.pokedex-grid-card.breathing {
    animation: pokedexCardBreathe 2.5s ease-in-out infinite alternate;
    border-color: var(--breathe-glow-color, var(--color-accent)); /* Match border to glow */
}
/* Ensure base card animation is none unless animated class is present */
.pokedex-grid-card { animation: none; }
.pokedex-grid-card.animated { animation: fadeInCard var(--animation-speed-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* ==========================================================================
   6. Detail View Lightbox
   ========================================================================== */
#detail-view-lightbox {
    /* Base styles defined earlier */
    transition: opacity var(--animation-speed-normal) ease, visibility 0s linear var(--animation-speed-normal);
}
#detail-view-lightbox.visible {
    opacity: 1; visibility: visible; transition-delay: 0s;
}
#detail-view-lightbox > div { /* The main content box */
    transform: translateY(20px) scale(0.98); /* Start slightly down and smaller */
    transition: transform var(--animation-speed-normal) ease, opacity var(--animation-speed-normal) ease;
    opacity: 0; /* Start hidden for transition */
}
#detail-view-lightbox.visible > div {
    transform: translateY(0) scale(1); /* Animate to final position */
    opacity: 1;
}

/* ==========================================================================
   7. TCG Lightbox
   ========================================================================== */
#tcg-lightbox {
    /* Base styles defined earlier */
     transition: opacity var(--animation-speed-normal) ease, visibility 0s linear var(--animation-speed-normal);
}
#tcg-lightbox.visible {
    opacity: 1; visibility: visible; transition-delay: 0s;
}
#tcg-lightbox > div { /* The main content box */
    transform: translateY(20px) scale(0.98);
    transition: transform var(--animation-speed-normal) ease, opacity var(--animation-speed-normal) ease;
    opacity: 0;
}
#tcg-lightbox.visible > div {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ==========================================================================
   8. Generator Lightbox
   ========================================================================== */
.generator-overlay {
    /* Base styles defined earlier */
    transition: opacity var(--animation-speed-normal) ease, visibility 0s linear var(--animation-speed-normal);
}
.generator-overlay.visible {
    opacity: 1; visibility: visible; transition-delay: 0s;
}
.generator-container {
    /* Base styles defined earlier */
    transform: translateY(20px) scale(0.98);
    transition: transform var(--animation-speed-normal) ease, opacity var(--animation-speed-normal) ease;
    opacity: 0;
}
.generator-overlay.visible .generator-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ==========================================================================
   9. Shared Component Styles (Buttons, Inputs, Tabs, etc.)
   ========================================================================== */

/* --- Buttons --- */
.sort-button, .pagination-button, .image-toggle-button, .history-button, .generator-submit-button, .check-all-button, .uncheck-all-button, .clear-shinies-button, .view-dex-button, #detail-close-button, #lightbox-close, #generator-close-button, #settings-toggle-button {
    cursor: pointer;
    transition: all var(--animation-speed-fast) ease;
}
/* Press effect for various buttons */
.sort-button:active, .pagination-button:active:not(:disabled), .image-toggle-button:active:not(:disabled), .history-button:active:not(:disabled), .generator-submit-button:active, #detail-close-button:active, #lightbox-close:active, #generator-close-button:active, #settings-toggle-button:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

/* --- Inputs & Selects --- */
#pokemon-search-main, .tcg-filter-input, .tcg-filter-select, #game-version-select, #variant-select, #generator-count, .generator-select {
    /* Base styles mostly defined above or by Tailwind */
    transition: border-color var(--animation-speed-fast), box-shadow var(--animation-speed-fast);
}
#pokemon-search-main:focus, .tcg-filter-input:focus, .tcg-filter-select:focus, #game-version-select:focus, #variant-select:focus, #generator-count:focus, .generator-select:focus {
     outline: none; border-color: var(--color-focus-border); box-shadow: 0 0 0 2px var(--color-focus);
}

/* --- Tabs (Detail View) --- */
#tabs .tab-button { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 3px solid transparent; color: var(--color-text-secondary); transition: all var(--animation-speed-fast) ease; font-size: 0.9rem; font-weight: 500; margin-bottom: -1px; }
#tabs .tab-button:hover { color: var(--color-text-primary); border-bottom-color: var(--color-border-light); }
#tabs .tab-button.active { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--dynamic-type-color, var(--color-accent)); }
#tab-content { /* Container for tab panels */ }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn var(--animation-speed-normal) ease-in-out; }

/* --- Sub-Tabs (Detail View) --- */
#game-info-tabs .sub-tab-button { padding: 0.3rem 0.8rem; cursor: pointer; border-radius: 0.25rem; color: var(--color-text-secondary); background-color: transparent; transition: all var(--animation-speed-fast) ease; font-size: 0.8rem; border: 1px solid transparent; }
#game-info-tabs .sub-tab-button:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); }
#game-info-tabs .sub-tab-button.active { color: white; font-weight: 500; background-color: var(--dynamic-type-color, var(--color-accent)); }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; animation: fadeIn var(--animation-speed-normal) ease-in-out; }

/* --- Detail View Sections --- */
.detail-section-title { font-size: 0.9rem; font-weight: 600; color: var(--dynamic-type-color, var(--color-accent)); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); }
.type-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 0.25rem; font-size: 0.8rem; font-weight: 500; color: white; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); }
.image-toggle-button { background-color: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }
.image-toggle-button:hover { background-color: rgba(0, 0, 0, 0.5); color: white; }
.image-toggle-button.active { background-color: var(--dynamic-type-color, var(--color-accent)); color: white; border-color: transparent; }
.image-toggle-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Stats --- */
.stat-bar-bg { background-color: rgba(0, 0, 0, 0.2); height: 8px; border-radius: 4px; overflow: hidden; }
.stat-bar { transition: width var(--animation-speed-slow) cubic-bezier(0.25, 1, 0.5, 1); height: 8px; border-radius: 4px; }
.sort-button { background-color: var(--color-bg-panel); border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; }
.sort-button:hover { border-color: var(--color-border-light); color: var(--color-text-primary); }
.sort-button.active { color: white; border-color: transparent; background-color: var(--dynamic-type-color, var(--color-accent)); }

/* --- Moves --- */
#moves-list li { padding: 0.2rem 0; border-bottom: 1px dashed var(--color-border); }
#moves-list li:last-child { border-bottom: none; }
.pagination-button { background-color: var(--color-bg-panel); border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 0.3rem 0.6rem; border-radius: 0.25rem; font-size: 0.8rem; }
.pagination-button:hover:not(:disabled) { border-color: var(--color-border-light); color: var(--color-text-primary); }
.pagination-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- TCG Specific --- */
.tcg-filter-input, .tcg-filter-select { background-color: var(--color-bg-panel); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; }
.tcg-filter-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1em 1em; padding-right: 2.5rem; }
.tcg-set-group { border: 1px solid var(--color-border); border-radius: 0.5rem; margin-bottom: 1rem; background-color: rgba(0,0,0,0.1); overflow: hidden; }
.tcg-set-header { padding: 0.75rem 1rem; background-color: rgba(0,0,0,0.2); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--color-text-secondary); transition: background-color var(--animation-speed-fast) ease; }
.tcg-set-header:hover { background-color: rgba(0,0,0,0.3); color: var(--color-text-primary); }
.tcg-set-header i { transition: transform var(--animation-speed-fast) ease-in-out; }
.tcg-set-header.collapsed i { transform: rotate(-90deg); }
.tcg-set-content { padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.tcg-set-content.hidden { display: none; }
.tcg-card { background-color: var(--color-bg-panel); border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--color-border-light); display: flex; flex-direction: column; cursor: pointer; transition: transform var(--animation-speed-fast) ease, box-shadow var(--animation-speed-fast) ease; }
.tcg-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.tcg-card-image { width: 100%; aspect-ratio: 63 / 88; object-fit: contain; background-color: var(--color-bg-light-panel); }
.tcg-card-details { padding: 0.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.tcg-card-details h5 { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; line-height: 1.2; }
.tcg-card-details h5 span { font-size: 0.7rem; }
.lightbox-detail-title { font-size: 0.9rem; font-weight: 600; color: var(--color-accent); margin-top: 1rem; margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); }
.lightbox-attack, .lightbox-ability { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--color-border); }
.lightbox-attack:last-child, .lightbox-ability:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.tcg-cost-icon { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-size: cover; margin: 0 1px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.3); }
/* TCG Type icon colors */
.tcg-type-Colorless { background-color: var(--tcg-type-Colorless); } .tcg-type-Darkness { background-color: var(--tcg-type-Darkness); } .tcg-type-Dragon { background-color: var(--tcg-type-Dragon); } .tcg-type-Fairy { background-color: var(--tcg-type-Fairy); } .tcg-type-Fighting { background-color: var(--tcg-type-Fighting); } .tcg-type-Fire { background-color: var(--tcg-type-Fire); } .tcg-type-Grass { background-color: var(--tcg-type-Grass); } .tcg-type-Lightning { background-color: var(--tcg-type-Lightning); } .tcg-type-Metal { background-color: var(--tcg-type-Metal); } .tcg-type-Psychic { background-color: var(--tcg-type-Psychic); } .tcg-type-Water { background-color: var(--tcg-type-Water); }

/* --- Generator Specific --- */
.generator-settings { width: 300px; flex-shrink: 0; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: relative; transition: width var(--animation-speed-normal) ease; }
.settings-toggle-button { position: absolute; top: 50%; right: -1px; transform: translateY(-50%); background-color: var(--color-bg-light-panel); border: 1px solid var(--color-border); border-left: none; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; padding: 0.75rem 0.25rem; color: var(--color-text-secondary); cursor: pointer; z-index: 5; }
.settings-toggle-button:hover { background-color: var(--color-border); color: var(--color-text-primary); }
.settings-sticky-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; background-color: var(--color-bg-panel); }
.settings-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.generator-submit-button.top-button { width: 100%; }
.settings-scrollable-content { padding: 1rem; overflow-y: auto; flex-grow: 1; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.settings-scrollable-content::-webkit-scrollbar { width: 6px; } .settings-scrollable-content::-webkit-scrollbar-track { background: transparent; } .settings-scrollable-content::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 3px; }
.generator-form { /* space-y handled by Tailwind potentially, or add margin here */ }
.form-section { margin-bottom: 1.25rem; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.section-header h4 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); }
.check-all-button, .uncheck-all-button { background: none; border: none; font-size: 0.7rem; color: var(--color-text-secondary); cursor: pointer; padding: 0.1rem 0.3rem; margin-left: 0.25rem; transition: color var(--animation-speed-fast) ease; }
.check-all-button:hover, .uncheck-all-button:hover { color: var(--color-accent); text-decoration: underline; }
.generator-select { background-color: var(--color-bg-light-panel); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.4rem; border-radius: 0.375rem; font-size: 0.875rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
/* Generator Checkbox Styles - Ensure these are present */
.generator-checkbox { display: flex; align-items: center; margin-bottom: 0.5rem; cursor: pointer; font-size: 0.85rem; user-select: none; color: var(--color-text-secondary); transition: color 0.2s ease; }
.generator-checkbox:hover { color: var(--color-text-primary); }
.generator-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: relative; display: inline-block; height: 16px; width: 16px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid var(--color-border); border-radius: 3px; margin-right: 8px; transition: all 0.2s ease; flex-shrink: 0; }
.generator-checkbox:hover input ~ .checkmark { background-color: rgba(255, 255, 255, 0.1); }
.generator-checkbox input:checked ~ .checkmark { background-color: var(--color-primary); border-color: var(--color-primary); }
.checkmark:after { content: ""; position: absolute; display: none; }
.generator-checkbox input:checked ~ .checkmark:after { display: block; }
.generator-checkbox .checkmark:after { left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Generator Results Area */
.generator-results-area { flex-grow: 1; padding: 1rem; display: flex; flex-direction: column; overflow: hidden; }
.generator-history-controls { /* Styles defined earlier */ }
.history-button { background-color: var(--color-bg-light-panel); border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-size: 0.8rem; }
.history-button:hover:not(:disabled) { background-color: var(--color-border); color: var(--color-text-primary); }
.history-button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Generator Tabs */
.generator-results-tabs { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 0.75rem; flex-shrink: 0; }
.generator-results-tab-button { padding: 0.5rem 1rem; cursor: pointer; border: none; background: none; color: var(--color-text-secondary); font-size: 0.9rem; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.generator-results-tab-button:hover { color: var(--color-text-primary); }
.generator-results-tab-button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.generator-results-container { /* Styles defined earlier */ }
.generator-results-tab-content { display: none; flex-grow: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-primary, #ef4444) rgba(0, 0, 0, 0.1); }
.generator-results-tab-content.active { display: block; }
.generator-results-tab-content::-webkit-scrollbar { width: 6px; } .generator-results-tab-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 3px; } .generator-results-tab-content::-webkit-scrollbar-thumb { background-color: var(--color-primary, #ef4444); border-radius: 3px; }
.generator-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; padding: 0.5rem; }
.generator-pokemon-card { background: linear-gradient(145deg, var(--card-gradient-color-1), var(--card-gradient-color-2)); border-radius: 0.5rem; border: 1px solid var(--color-border); padding: 0.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.generator-pokemon-card.shiny { border-color: gold; box-shadow: 0 0 8px gold; }
.generator-pokemon-card .card-header { position: absolute; top: 0.25rem; right: 0.25rem; font-size: 0.65rem; background-color: rgba(0,0,0,0.4); padding: 0.1rem 0.3rem; border-radius: 0.2rem; color: #eee; }
.generator-pokemon-card .shiny-star { color: gold; margin-left: 0.2em; }
.generator-pokemon-card .card-image-container { height: 72px; margin-bottom: 0.25rem; display: flex; align-items: center; justify-content: center; }
.generator-pokemon-card .card-image { max-height: 100%; max-width: 100%; object-fit: contain; }
.generator-pokemon-card .card-info { font-size: 0.75rem; }
.generator-pokemon-card .card-name { font-weight: 600; text-transform: capitalize; margin-bottom: 0.1rem; }
.generator-pokemon-card .card-nature { font-size: 0.65rem; color: var(--color-text-secondary); margin-bottom: 0.2rem; }
.generator-pokemon-card .card-types { display: flex; gap: 0.2rem; justify-content: center; margin-bottom: 0.2rem; }
.generator-pokemon-card .card-type { font-size: 0.6rem; padding: 0.1rem 0.3rem; border-radius: 0.2rem; color: white; text-transform: uppercase; }
.generator-pokemon-card .card-gender { font-size: 0.8rem; position: absolute; bottom: 0.25rem; left: 0.25rem; }
.generator-pokemon-card .card-gender.male { color: #6390F0; } .generator-pokemon-card .card-gender.female { color: #F95587; }
.generator-pokemon-card .view-dex-button { font-size: 0.65rem; padding: 0.15rem 0.4rem; margin-top: 0.3rem; background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; }
.generator-pokemon-card .view-dex-button:hover { background-color: var(--color-accent); color: white; border-color: transparent; }
/* History List Item */
.history-generation-item { background-color: rgba(255, 255, 255, 0.03); padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; border-radius: 0.25rem; border-left: 3px solid var(--color-secondary); font-size: 0.8rem; color: var(--color-text-secondary); cursor: pointer; transition: background-color 0.2s ease; display: flex; justify-content: space-between; align-items: center; }
.history-generation-item:hover { background-color: rgba(255, 255, 255, 0.07); color: var(--color-text-primary); }
.history-generation-item span { margin-right: 0.3em; display: inline-block; text-transform: capitalize; }
.history-generation-item .shiny-star { color: gold; margin-left: 0.1em; font-size: 0.9em; }
.history-generation-item button { font-size: 0.7rem; padding: 0.1rem 0.4rem; } /* Style view button */
/* Shiny History */
.shiny-history { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.shiny-history h3 { color: var(--color-text-secondary); font-size: 0.8rem; }
#generator-shiny-history { max-height: 100px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: gold rgba(255,215,0,0.1); }
#generator-shiny-history::-webkit-scrollbar { width: 5px; } #generator-shiny-history::-webkit-scrollbar-thumb { background-color: gold; border-radius: 2px; }
.shiny-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.shiny-card { display: flex; align-items: center; gap: 0.5rem; background-color: rgba(255, 215, 0, 0.1); padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid gold; }
.shiny-image { width: 32px; height: 32px; object-fit: contain; }
.shiny-info { flex-grow: 1; font-size: 0.75rem; }
.shiny-name { font-weight: 500; text-transform: capitalize; }
.shiny-date { font-size: 0.65rem; color: var(--color-text-secondary); }
.shiny-card .view-dex-button { font-size: 0.6rem; padding: 0.1rem 0.3rem; margin-left: auto; flex-shrink: 0; }
.clear-shinies-button { display: block; margin: 0.5rem auto 0; font-size: 0.7rem; color: var(--color-error); background: none; border: none; cursor: pointer; }
.clear-shinies-button:hover { text-decoration: underline; }
.no-shinies { text-align: center; padding: 0.5rem; }

/* ==========================================================================
   10. Animations & Keyframes
   ========================================================================== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInCard { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 0.7; transform: scale(1) translateY(0); } 50% { opacity: 1; transform: scale(1.05) translateY(-2px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loadingAnimation { 0% { transform: translateX(-100%); } 50% { transform: translateX(0%); } 100% { transform: translateX(100%); } }
@keyframes text-flicker { 0%, 10%, 12%, 20%, 22%, 30%, 32%, 40%, 42%, 50%, 52%, 60%, 62%, 70%, 72%, 80%, 82%, 90%, 92%, 100% { text-shadow: 0 0 5px rgba(255, 100, 100, 0.7), 0 0 10px rgba(255, 0, 0, 0.6), 0 0 15px rgba(138, 43, 226, 0.5); opacity: 1; } 11%, 21%, 31%, 41%, 51%, 61%, 71%, 81%, 91% { text-shadow: 0 0 4px rgba(255, 100, 100, 0.5), 0 0 8px rgba(255, 0, 0, 0.4), 0 0 12px rgba(138, 43, 226, 0.3); opacity: 0.95; } }
@keyframes pokedexCardBreathe { 0%, 100% { box-shadow: 0 3px 6px rgba(0,0,0,0.2), 0 0 8px 2px rgba(var(--breathe-glow-color-rgb, 59, 130, 246), 0.4); transform: scale(1); } 50% { box-shadow: 0 6px 12px rgba(0,0,0,0.25), 0 0 15px 5px rgba(var(--breathe-glow-color-rgb, 59, 130, 246), 0.6); transform: scale(1.015); } }

/* ==========================================================================
   11. Media Queries & Responsiveness
   ========================================================================== */
/* Header Adjustments */
@media (max-width: 768px) {
    header { flex-direction: column; align-items: center; }
    header h1 { font-size: 1.75rem; text-align: center; }
    .header-controls { width: 100%; justify-content: center; }
    .search-container { max-width: none; }
    #random-pokemon-button span { display: none; } /* Hide text on small screens */
}

/* Grid Columns */
@media (max-width: 480px) { /* Extra Small */
    #pokedex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .gen-tab-button, .type-filter-button { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
}
@media (min-width: 481px) and (max-width: 640px) { /* Small */
     #pokedex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 641px) and (max-width: 1024px) { /* Medium */
     #pokedex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1025px) and (max-width: 1280px) { /* Large */
     #pokedex-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1281px) { /* Extra Large+ */
     #pokedex-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Detail View Layout */
@media (max-width: 767px) {
    #detail-view-lightbox > div { flex-direction: column; max-height: 95vh; }
    #visual-section { width: 100% !important; border-radius: 0.5rem 0.5rem 0 0 !important; }
    #content-section { width: 100% !important; border-radius: 0 0 0.5rem 0.5rem !important; }
    #pokemon-image { height: 160px !important; } /* Smaller image */
}

/* Generator Layout */
@media (max-width: 768px) {
    .generator-body-split { flex-direction: column; }
    .generator-settings { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); max-height: 40vh; /* Limit height */ }
    .settings-toggle-button { display: none; /* Hide toggle on mobile? Or reposition */ }
    .settings-scrollable-content { padding: 0.75rem; }
    .generator-results-area { padding: 0.75rem; }
}

/* ==========================================================================
   12. Error Styles
   ========================================================================== */
.error-message, .error-subtle, .pokedex-init-error {
    /* Styles mostly defined earlier or inline */
    border-radius: 0.5rem;
}

/* --- End of Combined CSS --- */