/*
 * style.css — The Hacked Pokédex site-wide stylesheet
 *
 * HOW CSS WORKS (quick primer):
 *   - Rules are written as "selector { property: value; }".
 *   - The selector identifies which HTML elements the rule applies to.
 *   - Properties control visual appearance: layout, color, size, animation, etc.
 *
 * FILE STRUCTURE:
 *   1. Fonts import            — loads custom typefaces from Google
 *   2. Reset / base styles     — zero out browser default spacing and sizing
 *   3. CSS custom properties   — design tokens (colors, sizes) reused throughout
 *   4. Top navigation bar      — the fixed header across the top of every page
 *   5. Sidebar                 — the collapsible left-hand navigation panel
 *   6. Content area            — the main page content region
 *   7. Filter / search bar     — Pokédex filter controls
 *   8. Pokémon grid and list   — the card grid and tabular list views
 *   9. Pokémon detail page     — the individual Pokémon entry layout
 *  10. Move tables             — move sections on Pokémon and Movedex pages
 *  11. Locations accordion     — encounter location collapsible rows
 *  12. Evolution chain         — the sprite chain diagram
 *  13. Responsive overrides    — mobile layout adjustments (@media queries)
 */

/* Load three custom fonts from Google Fonts:
   - Nunito:     main body and UI font — rounded, very readable at small sizes
   - Outfit:     logo / hero heading font — modern geometric style
   - Space Mono: monospaced font used for dex numbers and stat values
   display=swap means text shows in the fallback font immediately,
   then swaps to the custom font once loaded (avoids invisible text flash) */
/* @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Outfit:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap'); */

/* ── Reset: remove all browser-default margins, padding, and sizing quirks ───
   By default, browsers add their own spacing around headings, paragraphs, etc.
   We zero everything out here so the design starts from a blank slate.
   box-sizing: border-box means padding and borders are included inside the
   element's declared width, preventing unexpected overflow. */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* ── CSS Custom Properties (design tokens) ───────────────────────────────────
   "var(--name)" syntax allows these values to be reused everywhere.
   Changing a value here automatically updates every element that uses it.
   The design uses a dark-mode palette throughout. */
:root {
    --bg: #0d0f1a;
    /* Page background — very dark blue-black */
    --surface: #161927;
    /* Card and panel backgrounds — slightly lighter than bg */
    --surface2: #1e2236;
    /* Hover/active states — even lighter, used for interactive feedback */
    --border: #272c45;
    /* Lines and dividers — barely visible dark blue */
    --text: #e8eaf6;
    /* Primary text — near-white with a slight blue tint */
    --text-dim: #9ba1c2;
    /* Secondary/muted text — grey-blue for labels and hints */
    --accent: #7c83f5;
    /* Brand color — a soft purple used for links and highlights */
    --radius: 12px;
    /* Corner rounding for cards, buttons, and panels */
    --sidebar-w: 280px;
    /* Width of the left navigation sidebar */
    --nav-h: 70px;
    /* Height of the fixed top navigation bar */
    --font: 'Nunito', sans-serif;
    /* Main font stack */
    --mono: 'Space Mono', monospace;
    /* Monospace font for numbers and codes */
}

/* Base body styles: apply the main font, dark background, and near-white text */
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    /* ensure body extends to at least full viewport height */
    font-size: 16px;
    line-height: 1.5
}

/* ── Reset / base styles ── */
html {
    scrollbar-gutter: stable;
}

/* ── TOP NAVIGATION BAR ─────────────────────────────────────────────────────────────
   The top nav is "fixed" (position: fixed), meaning it stays at the top of
   the screen even as the user scrolls. It contains the sidebar toggle button,
   site logo, nav links, and search bar. z-index: 200 keeps it above all other
   page content (the sidebar is z-index 100, so the nav bar overlaps it). */
/* Top nav */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    /* lays out children in a horizontal row */
    align-items: center;
    /* vertically center all children */
    padding: 0 1.5rem;
    gap: 2rem;
    /* spacing between logo, links, and search */
    z-index: 200;
    /* float above all other elements */
}

/* Site logo: displays the logo image + site name side by side.
   overflow: hidden clips the image so it doesn't overflow the nav bar height. */
.site-logo {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    /* prevent text from wrapping to a second line */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Outfit', sans-serif;
    height: 58px;
    overflow: hidden
        /* clip logo image to the nav bar bounds */
}

/* image-rendering: pixelated preserves crisp edges on the low-res logo image */
.site-logo img {
    height: 70px;
    width: auto;
    image-rendering: pixelated
}

/* ≡ Hamburger button that shows/hides the sidebar panel.
   transition: background adds a smooth color fade on hover. */
.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.2s;
}

.sidebar-toggle:hover {
    background: var(--surface2)
        /* subtle highlight on hover */
}

.top-nav-links {
    display: flex;
    gap: 1.5rem
}

/* Nav link text: small, bold, uppercase, muted by default.
   Turns accent-colored when hovered or when the page's active nav link. */
.top-nav-link {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .2s
}

.top-nav-link:hover,
.top-nav-link.active {
    color: var(--accent)
        /* active/hovered link turns the accent purple */
}

/* Quick-search: positioned relatively so the icon can be placed inside it
   using absolute positioning without affecting surrounding layout. */
.top-nav-search {
    margin-left: auto;
    /* pushes the search box to the far right of the nav */
    position: relative
}

.top-nav-search input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: .95rem;
    padding: .45rem .8rem .45rem 2.2rem;
    /* left padding makes room for the search icon */
    outline: none;
    /* remove the default blue focus ring (we add our own via border-color) */
    width: 240px;
    transition: border-color .2s;
}

.top-nav-search input:focus {
    border-color: var(--accent)
        /* highlight border when user clicks into the search box */
}

/* The search icon (magnifying glass emoji) overlaid inside the input field.
   pointer-events: none ensures clicks pass through to the input behind it. */
.top-nav-search .s-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    /* vertically center the icon inside the field */
    color: var(--text-dim);
    font-size: .9rem;
    pointer-events: none
        /* clicks pass through to the input behind the icon */
}

/* ── MAIN LAYOUT ──────────────────────────────────────────────────────────────
   The outer .layout wrapper uses flexbox to place the sidebar and main content
   side by side. padding-top offsets the fixed nav bar so content isn't hidden behind it. */
/* Layout */
.layout {
    display: flex;
    /* sidebar and content sit side by side in a row */
    padding-top: var(--nav-h);
    /* push content below the fixed top nav bar */
    min-height: 100vh
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────────
   The sidebar can be hidden by adding the "sidebar-hidden" class to <html>.
   When hidden, the container shifts left by its own width using a negative margin,
   which creates a smooth slide-out animation (controlled by transition). */
/* Sidebar */
.sidebar-container {
    width: var(--sidebar-w);
    flex-shrink: 0;
    /* don't shrink sidebar even if the window is narrow */
    background: var(--surface);
    border-right: 1px solid var(--border);
    /* cubic-bezier controls the acceleration curve of the slide animation */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: stretch;
    z-index: 100;
}

@media(max-width: 800px) {
    .sidebar-container {
        position: fixed;
        left: 0;
        top: var(--nav-h);
        bottom: 0;
        z-index: 500;
        /* overlay above content but below top nav (200) - wait, top nav is 200 */
        /* Actually sidebar should probably be below top nav? Yes, it's z-index 100 on desktop.
           But if it overlaps content, it needs to be higher. Let's use 300. */
        z-index: 300;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
    }

    .sidebar-hidden .sidebar-container {
        transform: translateX(-100%);
        margin-left: 0 !important;
    }

    .layout {
        display: block;
    }
}



/* When the sidebar is hidden: shift it left by its full width to hide it */
.sidebar-hidden .sidebar-container {
    margin-left: calc(-1 * var(--sidebar-w));
}

/* Suppress sidebar transition on initial page load to prevent flash */
html.no-transition .sidebar-container {
    transition: none !important;
}

.sidebar {
    width: 100%;
    /* position: sticky; */
    /* top: var(--nav-h); */
    padding: 1.5rem 0 3rem;
}

.sidebar::-webkit-scrollbar {
    width: 6px
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px
}

.sidebar-section {
    padding: .75rem 1.5rem .5rem
}

.sidebar-label {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .6rem;
    display: block
}

.sidebar-label.collapsable {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sidebar-label.collapsable:hover {
    color: var(--text)
}

.sidebar-label .s-icon {
    display: inline-block;
    transition: transform .15s;
    margin-left: 0.5rem
}

.sidebar-label .s-icon.open {
    transform: rotate(90deg)
}


/* ── COLLAPSABLE CARDS ────────────────────────────────────────────────────────
   Allows sections (like movesets) to be toggled open/closed.
   The .card-header handles the click and layouts the title + toggle button. */
.collapsable .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 1.5rem;
    /* Match base card spacing when open */
}

.collapsable.collapsed .card-header {
    margin-bottom: 0;
    /* Tighten up when closed */
}

.collapsable .card-header:hover .move-section-title,
.collapsable .card-header:hover .card-title {
    color: var(--accent);
}

.collapsable .card-content {
    display: block;
}

.collapsable.collapsed .card-content {
    display: none;
}

@media(min-width: 801px) {
    .poke-sidebar-card.collapsable.collapsed .card-content {
        display: block;
    }
}


.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: .5rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dim);
    font-weight: 700;
    font-size: .95rem;
    transition: all .2s;
    margin-bottom: 2px;
    text-align: right;
}

.sidebar-link:hover {
    background: var(--surface2);
    color: var(--text);
    transform: translateX(-5px)
}

.sidebar-link.active {
    background: var(--surface2);
    color: var(--accent)
}

.sidebar-gen-badge {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 20px;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.sidebar-link:hover .sidebar-gen-badge {
    transform: scale(1.05)
}

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: .8rem 1.5rem
}

/* Content */
.content {
    flex: 1;
    padding: 3rem 3rem 5rem;
    max-width: 1300px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

@media(max-width:800px), (hover: none) and (pointer: coarse) {
    .content {
        padding: 1.5rem 1rem 5rem;
    }
}

.mob-only {
    display: none !important;
}

.sidebar-hidden .content {
    margin-left: 0;
}

/* Page header */
.page-header {
    margin-bottom: 2.5rem
}

@media(max-width:800px), (hover: none) and (pointer: coarse) {
    .page-header {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .page-title {
        font-size: 2rem;
    }
}

.page-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em
}

.page-subtitle {
    color: var(--text-dim);
    font-size: .95rem;
    margin-top: .5rem
}

.gen-accent-bar {
    height: 5px;
    width: 80px;
    border-radius: 3px;
    margin-top: 1rem
}

@media(max-width:800px), (hover: none) and (pointer: coarse) {
    .gen-accent-bar {
        margin: 1rem auto 0;
    }
}

/* Filter bar */
.filter-controls {
    margin-bottom: 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.filter-bar {
    display: flex;
    padding: 1.25rem;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: border-color .25s
}

@media(max-width:600px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
    }
}

.filter-bar.panel-open {
    border-color: var(--border)
}

.search-wrapper {
    position: relative;
    flex: 1
}

.search-wrapper .s-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none
}

.search-wrapper input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    padding: .6rem 1rem .6rem 2.8rem;
    outline: none;
    width: 100%;
    transition: border-color .2s;
}

.search-wrapper input:focus {
    border-color: var(--accent)
}

.filter-toggle-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 700;
    padding: .6rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: all .2s;
}

@media(max-width:600px) {
    .filter-toggle-btn {
        justify-content: center;
    }
}

.filter-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--border)
}

.filter-toggle-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white
}

.filter-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(22, 25, 39, 0.5);
}

.filter-panel.open {
    max-height: 800px;
    border-top: 1px solid var(--border)
}

.filter-group {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border)
}

.filter-group:last-child {
    border-bottom: none
}

.filter-label {
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
    margin-bottom: 1rem
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.filter-pill {
    padding: .4rem 1.1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    transition: all .2s;
    opacity: 0.6;
}

.filter-pill:hover {
    border-color: var(--accent);
    color: var(--text);
    opacity: 1
}

.filter-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(124, 131, 245, 0.3)
}

/* VG sprite button state driven by html[data-vg-sprites] — set before stylesheet loads */
html[data-vg-sprites] .filter-pill[data-vg] {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
    opacity: 0.6;
    box-shadow: none
}

html[data-vg-sprites="red-blue"] .filter-pill[data-vg="red-blue"],
html[data-vg-sprites="yellow"] .filter-pill[data-vg="yellow"],
html[data-vg-sprites="gold"] .filter-pill[data-vg="gold"],
html[data-vg-sprites="silver"] .filter-pill[data-vg="silver"],
html[data-vg-sprites="crystal"] .filter-pill[data-vg="crystal"],
html[data-vg-sprites="ruby-sapphire-emerald"] .filter-pill[data-vg="ruby-sapphire-emerald"],
html[data-vg-sprites="firered-leafgreen"] .filter-pill[data-vg="firered-leafgreen"],
html[data-vg-sprites="diamond-pearl"] .filter-pill[data-vg="diamond-pearl"],
html[data-vg-sprites="heartgold-soulsilver"] .filter-pill[data-vg="heartgold-soulsilver"],
html[data-vg-sprites="platinum"] .filter-pill[data-vg="platinum"],
html[data-vg-sprites="black-white"] .filter-pill[data-vg="black-white"],
html[data-vg-sprites="x-y"] .filter-pill[data-vg="x-y"],
html[data-vg-sprites="omegaruby-alphasapphire"] .filter-pill[data-vg="omegaruby-alphasapphire"],
html[data-vg-sprites="sun-moon"] .filter-pill[data-vg="sun-moon"],
html[data-vg-sprites="sword-shield"] .filter-pill[data-vg="sword-shield"],
html[data-vg-sprites="scarlet-v"] .filter-pill[data-vg="scarlet-v"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(124, 131, 245, 0.3)
}

.filter-gen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    color: white !important;
    border: none;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.35;
}

.filter-gen-badge:hover {
    opacity: 1;
    transform: translateY(-2px)
}

.filter-gen-badge.active {
    opacity: 1;
    box-shadow: 0 0 0 3px white, 0 8px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}


.shiny-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.shiny-toggle-btn:hover {
    border-color: #ffd700;
    color: #ffd700
}

/* Animate button active state driven by CSS — no hardcoded class needed */
html:not([data-anim-off]) #btn-animate-toggle {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(124, 131, 245, 0.3)
}

html[data-anim-off] #btn-animate-toggle {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
    opacity: 0.6;
    box-shadow: none
}

html[data-shiny="1"] #btn-shiny-toggle,
.filter-pill.shiny-toggle-btn.active {
    background: linear-gradient(135deg, #ffd700, #ffa500) !important;
    border-color: #ffd700 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
    opacity: 1 !important;
}

html[data-shiny="1"] #btn-shiny-toggle .s-icon,
.shiny-toggle-btn.active .s-icon {
    animation: shiny-pulse 1.5s infinite;
}

@keyframes shiny-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.animate-toggle-btn.active {
    background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
    border-color: #4facfe !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.4) !important;
    opacity: 1 !important;
}

.animate-toggle-btn.active .s-icon {
    display: inline-block;
    animation: play-pulse 1.5s infinite;
}

@keyframes play-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.divider-v {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px
}

/* Pokemon grid */
.pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem
}

.pokemon-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem .8rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: block;
}

.pokemon-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(124, 131, 245, .2)
}

.dex-num {
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--text-dim);
    margin-bottom: .3rem
}

.pokemon-card img {
    width: 86px;
    height: 86px;
    image-rendering: pixelated;
    object-fit: contain
}

.poke-name {
    font-weight: 800;
    font-size: 1.05rem;
    margin: .5rem 0
}

html[data-hide-alts="1"] .poke-name .name-full {
    display: none !important;
}

html[data-hide-alts="1"] .poke-name .name-base {
    display: inline !important;
}

.type-badges {
    display: flex;
    gap: .35rem;
    justify-content: center;
    flex-wrap: wrap
}

.type-badge {
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    padding: .15rem 0;
    border-radius: 999px;
    letter-spacing: .04em;
    text-shadow: 1px 1px 0px #000;
    display: inline-block;
    width: 66px;
    text-align: center
}

.no-results {
    color: var(--text-dim);
    text-align: center;
    padding: 4rem;
    font-size: 1.2rem
}

/* View Toggles & List */
html[data-view-mode="list"] .pokemon-grid {
    display: none !important;
}

html[data-view-mode="list"] .pokemon-list-wrapper {
    display: block !important;
}

.view-toggles {
    display: flex;
    gap: .4rem;
    margin-left: auto
}

@media(max-width:600px) {
    .view-toggles {
        margin-left: 0;
        width: 100%;
        gap: 0.5rem;
    }

    .view-toggle {
        flex: 1;
    }
}

.view-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: .45rem .8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    min-width: 90px;
    gap: .4rem
}

.view-toggle:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.view-toggle.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

/* Grid is active by default; list becomes active when html[data-view-mode=list] */
#btn-view-grid {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

html[data-view-mode="list"] #btn-view-grid {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim)
}

html[data-view-mode="list"] #btn-view-list {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.pokemon-list-wrapper {
    overflow-x: auto;
    display: none;
    width: 100%
}

.pokemon-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: .8rem;
    min-width: 700px;
    font-size: .95rem;
    text-align: left
}

.pokemon-list-table th {
    padding: .9rem .75rem;
    color: var(--text-dim);
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 3px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-align: center
}

.pokemon-list-table th:hover {
    color: var(--accent)
}

th.sort-asc::after {
    content: " \25B2";
    font-size: .65rem
}

th.sort-desc::after {
    content: " \25BC";
    font-size: .65rem
}

.pokemon-list-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: center
}

.pokemon-list-table th:first-child,
.pokemon-list-table td:first-child {
    text-align: left;
}

.pokemon-list-table th:last-child,
.pokemon-list-table td:last-child {
    text-align: right;
    padding-right: 1.5rem;
}

.pokemon-row {
    transition: background .15s;
    cursor: pointer
}

.pokemon-row:hover {
    background: var(--surface2)
}

.pokemon-row img {
    width: 54px;
    height: 54px;
    image-rendering: pixelated;
    object-fit: contain;
    display: block
}

.pokemon-row .dex-num {
    margin: 0;
    font-size: .85rem;
    font-family: var(--mono);
    color: var(--text-dim)
}

.pokemon-row .poke-name {
    font-size: .95rem;
    margin: 0;
    font-weight: 800
}

.pokemon-row .stat-val {
    font-family: var(--mono);
    font-size: .9rem
}

.pokemon-row .stat-total {
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 800;
    color: var(--accent)
}

/* Scroll to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    font-size: 1.5rem;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    background: var(--accent-hover, #6c80bc);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}


/* Pokemon detail */
.poke-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start
}

/* Base collapse-toggle style (used by info card and move sections) */
.collapse-toggle {
    display: none;
    /* Hidden by default */
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
    margin: 0 auto;
}

.collapse-toggle:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Move sections are collapsable on all devices */
.move-section.collapsable .collapse-toggle {
    display: block;
    margin: 0;
}


.poke-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    /* Use the same corner radius as all other cards for visual consistency */
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--accent);
    text-align: center;
}



.poke-art {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 15px auto;
    display: block;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4))
}

.poke-id {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 12px;
    font-family: var(--mono);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.gen-badge {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.poke-title {
    font-size: 2.6rem;
    font-weight: 900;
    margin: 12px 0 4px;
    letter-spacing: -0.03em
}

.poke-subtitle {
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 15px;
    font-weight: 600
}

.poke-genus {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 20px;
    font-style: italic
}

/* Evolution Flow Chart */
.evo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem;
    flex-wrap: wrap;
    background: var(--surface2);
    border-radius: 12px;
    margin-top: 0.5rem;
    border: 1px solid var(--border);
}

.evo-node {
    text-align: center;
    transition: transform 0.2s;
}

.evo-node:hover {
    transform: translateY(-5px);
}

.evo-node a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.evo-node img {
    width: 90px;
    height: 90px;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.evo-node .name {
    font-size: 0.85rem;
    font-weight: 800;
    margin-top: 0.5rem;
    color: var(--text);
    white-space: nowrap;
}

.evo-node.active {
    background: var(--accent);
    border-radius: 12px;
    padding: 8px;
    color: white;
}

.evo-node.active .name {
    color: white;
}

.evo-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-dim);
    min-width: 80px;
}

.evo-method {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 4px;
    white-space: nowrap;
}

.evo-arrow svg {
    color: var(--accent);
    opacity: 0.6;
}

.poke-type-row {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem
}

.sprite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: 1.2rem
}

.sprite-cell {
    text-align: center
}

.sprite-cell img {
    width: 60px;
    height: 60px;
    image-rendering: pixelated;
    object-fit: contain
}

.sprite-label {
    font-size: .7rem;
    color: var(--text-dim);
    margin-top: .2rem;
    display: block
}

.meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.2rem;
    font-size: .9rem
}

.meta-table td {
    padding: .4rem .5rem;
    border-top: 1px solid var(--border)
}

.meta-table td:first-child {
    color: var(--text-dim);
    font-weight: 700;
    text-align: left;
    width: 45%
}

.meta-table td:last-child {
    text-align: right
}

.flag {
    font-size: .85rem;
    font-weight: 800;
    margin: .2rem 0
}

.flag-legendary {
    color: #f5c400
}

.flag-mythical {
    color: #f5a623
}

/* Detail right */
.poke-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem
}

.card-title {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.2rem
}

/* Stats */
.stat-row {
    display: grid;
    grid-template-columns: 50px 40px 1fr;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem
}

.stat-label {
    font-size: .8rem;
    color: var(--text-dim);
    font-weight: 800;
    font-family: var(--mono)
}

.stat-value {
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 700;
    text-align: right
}

.stat-bar-bg {
    background: var(--surface2);
    border-radius: 999px;
    height: 8px
}

.stat-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .7s ease
}

.stat-total {
    text-align: right;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--text-dim);
    margin-top: .5rem
}

/* Abilities */
.ability-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.ability-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem
}

.ability-name {
    font-weight: 800
}

.ability-tag {
    font-size: .7rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: .15rem .5rem;
    border-radius: 6px;
    color: var(--text-dim)
}

/* Version group tabs */
.vg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.2rem
}

.vg-tab {
    padding: .35rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-dim);
    transition: all .15s;
}

.vg-tab:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.vg-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

/* Move sections */
.move-section {
    margin-bottom: 3rem
}

.move-section:last-child {
    margin-bottom: 0
}

.move-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--border);
}

.move-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem
}

.move-table th {
    text-align: center;
    padding: .9rem .6rem;
    color: var(--text-dim);
    font-weight: 900;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.move-table td {
    padding: .8rem .6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: center
}

.move-table td:nth-child(1),
.move-table td:nth-child(2) {
    text-align: left;
}

.move-table tr:last-child td {
    border-bottom: none
}

.move-table tr:hover td {
    background: rgba(255, 255, 255, 0.04)
}

.move-name-cell {
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: capitalize;
    color: var(--text);
    line-height: 1.2
}

.move-tm-val {
    font-family: var(--mono);
    font-weight: 800;
    color: var(--accent);
    font-size: 1rem
}

.move-effect-text {
    font-size: .8rem;
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
    max-width: 320px;
    line-height: 1.4;
    opacity: 0.85;
    padding-left: 4px
}

.move-cat-badge {
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .04em;
    display: inline-block;
    min-width: 65px;
    text-align: center;
    text-shadow: 1px 1px 0px #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
}

.move-level-val {
    font-family: var(--mono);
    font-weight: 800;
    color: var(--accent);
    font-size: 1rem;
}

.move-stat-val {
    font-family: var(--mono);
    font-size: 0.95rem;
}

.move-stat-val b {
    color: var(--text);
}

.move-stat-val em {
    color: var(--text-dim);
    font-style: normal;
}

.move-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.move-empty {
    color: var(--text-dim);
    font-style: italic;
    font-size: .95rem;
    padding: .5rem 0
}

/* Dex entries */
.dex-entries {
    display: flex;
    flex-direction: column
}

.dex-entry {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
    line-height: 1.7
}

.dex-entry:last-child {
    border-bottom: none
}

.dex-ver-tag {
    display: inline-block;
    font-size: .7rem;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: 6px;
    margin-right: .5rem;
    vertical-align: middle;
}

/* Location Accordion */
.loc-accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.loc-game-row {
    border-bottom: 1px solid var(--border);
}

.loc-game-row:last-child {
    border-bottom: none;
}

.loc-game-header {
    display: flex !important;
    align-items: center;
    padding: 0.8rem 1.25rem;
    cursor: pointer;
    background: var(--surface2);
    transition: all 0.2s;
    user-select: none;
    min-height: 54px;
}

.loc-game-header:hover {
    background: var(--border);
}

.loc-game-header.active {
    background: var(--surface);
    border-bottom: 2px solid var(--accent);
}

.loc-game-row.unavailable .loc-game-header {
    cursor: default;
    background: transparent;
    opacity: 0.5;
}

.loc-game-name {
    font-weight: 900;
    min-width: 160px;
    color: var(--text);
    font-size: 1.1rem;
}

.loc-game-summary {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1.5rem;
}

.loc-game-status {
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.loc-game-status.avail {
    color: #44ff88;
}

.loc-game-status.unavail {
    color: #ff6666;
}

.loc-details-panel {
    padding: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.loc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem
}

.loc-table th {
    padding: .75rem;
    text-align: center;
    color: var(--text-dim);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 2px solid var(--border);
}

.loc-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle
}

.loc-table.condensed {
    font-size: 0.9rem;
}

.loc-table.condensed th {
    padding: 0.5rem;
}

.loc-table.condensed td {
    padding: 0.4rem 0.5rem;
}

.loc-table tr:last-child td {
    border-bottom: none
}

.loc-table tr:hover td {
    background: var(--surface2)
}

.loc-name {
    font-weight: 800;
    color: var(--text);
    font-size: 1.05rem
}

.loc-method-tag {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loc-cond-tag {
    font-size: .65rem;
    font-weight: 700;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-dim);
    margin-left: 4px;
}

.loc-chance-val {
    font-family: var(--mono);
    font-weight: 800;
    color: var(--accent)
}

.loc-none {
    color: var(--text-dim);
    font-style: italic;
    font-size: .95rem;
    padding: 1rem;
}

/* Prev/next */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(var(--nav-h, 60px) + 1.5rem);
}

.poke-nav {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.bottom-page-nav,
.mobile-top-page-nav {
    display: none;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

@media(max-width:800px), (hover: none) and (pointer: coarse) {
    .poke-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Ensure all cards are the same width */
    }

    .left-column {
        position: static !important;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* Only show the info card collapse toggle on mobile */
    .poke-sidebar-card .collapse-toggle {
        display: block;
    }

    .bottom-page-nav,
    .mobile-top-page-nav {
        display: flex !important;
        margin: 1.5rem 0;
        /* Remove negative margins to align with cards */
        padding: 1.25rem 0;
        background: transparent;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        gap: 0.75rem;
    }

    .mobile-top-page-nav {
        margin-top: 0;
        margin-bottom: 2rem;
        border-top: none;
    }

    .gen-switcher {
        margin: 0 0 1.5rem 0;
        padding: 8px 8px 1.2rem 8px;
        /* Extra padding for badge outlines and shadow */
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .mob-hidden {
        display: none !important;
    }

    .mob-only {
        display: table-cell !important;
    }

    .card {
        padding: 1.25rem 0.75rem !important;
    }

    .poke-sidebar-card {
        margin-bottom: 0;
        padding: 1.25rem 0.75rem !important;
        /* Unified with .card */
    }

    /* Tighten move tables for mobile */
    .move-table td,
    .move-table th {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    /* Shrink badges on mobile */
    .type-badge,
    .move-cat-badge {
        width: 58px !important;
        min-width: 58px !important;
        font-size: 0.6rem !important;
    }

    /* Aggressive wrapping for move descriptions */
    .move-effect-text {
        max-width: 140px !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* Prevent stats from wrapping to keep columns aligned */
    .move-stat-val {
        font-size: 0.85rem !important;
        white-space: nowrap;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }

    .move-table th {
        white-space: nowrap;
    }

    .poke-sidebar-card .poke-art {
        max-width: 220px;
        margin: 10px auto;
    }

    /* Compact Evolution Chain for Mobile */
    .evo-container {
        gap: 0.5rem;
        padding: 1rem 0.5rem;
    }

    .evo-node img {
        width: 70px;
        height: 70px;
    }

    .evo-arrow {
        min-width: 40px;
        gap: 2px;
    }

    .evo-method {
        font-size: 0.6rem;
        padding: 1px 4px;
    }

    .evo-node .name {
        font-size: 0.75rem;
        white-space: normal;
        /* Allow wrapping to save horizontal space */
        max-width: 80px;
    }

    .poke-sidebar-card .poke-title {
        font-size: 2rem;
    }

    .poke-sidebar-card .poke-id {
        font-size: 0.9rem;
    }

    /* Top Nav Optimization */
    .top-nav {
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    .site-logo span {
        display: none;
    }

    .top-nav-links {
        display: none;
    }

    .top-nav-search {
        flex: 1;
    }

    .top-nav-search input {
        width: 100%;
        font-size: 0.85rem;
        padding-left: 1.8rem;
    }

    .top-nav-search .s-icon {
        left: 0.6rem;
    }
}

.top-nav-arrows {
    margin: 0;
}

.bottom-nav-arrows {
    margin: 0;
}

.poke-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    padding: .6rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    transition: all .2s;
    box-sizing: border-box;
    flex: 1;
}

.poke-nav .nav-link:hover {
    background: var(--surface2);
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.poke-nav .nav-empty {
    display: none;
}

.poke-nav img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.poke-nav .nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-bottom: 2rem
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none
}

.breadcrumb a:hover {
    text-decoration: underline
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
    font-size: 1.4rem;
    transition: all .2s;
    cursor: pointer;
}

.back-btn:hover {
    background: var(--surface2);
    transform: translateX(-3px);
    border-color: var(--accent)
}

/* Games */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem
}

.game-card {
    display: block;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    transition: transform .15s;
}

.game-card:hover {
    transform: translateY(-4px)
}

.game-gen-label {
    font-size: .75rem;
    font-family: var(--mono);
    color: var(--text-dim);
    margin-bottom: .3rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

.game-name {
    font-size: 1.15rem;
    font-weight: 900
}

.gen-section-header {
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 2.5rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.gen-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1.5rem 0;
    padding: 5px 5px 1.5rem 5px;
    /* Added top and side padding for active badge outline */
    border-bottom: 1px solid var(--border)
}

.gen-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
    color: white !important;
    border: none;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.45;
}

.gen-nav-badge:hover:not(.disabled) {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4)
}

.gen-nav-badge.active {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px white, 0 8px 20px rgba(0, 0, 0, 0.5);
}

.gen-nav-badge.disabled {
    opacity: .1;
    pointer-events: none;
    filter: grayscale(1)
}

/* Home Page */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: 2rem
}

.home-logo {
    height: 280px;
    width: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 30px rgba(124, 131, 245, 0.3));
    animation: float 6s ease-in-out infinite;
    image-rendering: pixelated
}

.home-title {
    font-family: 'Outfit', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    line-height: 1
}

.home-subtitle {
    font-size: 1.2rem;
    color: var(--text-dim);
    margin-bottom: 3rem;
    max-width: 600px
}

.home-nav {
    display: flex;
    gap: 1.5rem
}

.home-btn {
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-btn.primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 10px 25px rgba(124, 131, 245, 0.4)
}

.home-btn.primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(124, 131, 245, 0.5)
}

.home-btn.outline {
    border: 2px solid var(--border);
    color: var(--text);
    background: transparent
}

.home-btn.outline:hover {
    background: var(--surface2);
    border-color: var(--accent);
    transform: translateY(-5px)
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@media(max-width:768px) {
    .home-title {
        font-size: 3rem
    }

    .home-nav {
        flex-direction: column;
        width: 100%;
        max-width: 300px
    }
}

/* =====================================================================
   Movedex — Move Hero Card
   ===================================================================== */
.move-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 0;
}

.move-hero-badges {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1.2rem;
    flex-wrap: wrap
}

.move-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.2rem;
}

@media(max-width:600px) {
    .move-hero-stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

.move-hero-stat {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem 1rem;
    text-align: center;
}

.move-hero-stat-label {
    display: block;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
    margin-bottom: .35rem;
}

.move-hero-stat-val {
    font-family: var(--mono);
    font-size: 1.3rem;
    font-weight: 800;
}

.move-hero-stat-val b {
    color: var(--text)
}

.move-hero-stat-val em {
    color: var(--text-dim);
    font-style: normal
}

.move-hero-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dim);
    font-style: italic;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}

/* =====================================================================
   Movedex — Learner Tables
   ===================================================================== */
.learner-table .col-num {
    width: 60px
}

.learner-table .col-sprite {
    width: 60px;
    text-align: center
}

.learner-table .col-level {
    width: 52px
}

.learner-table .col-tm {
    width: 72px
}

.learner-table .col-name {
    text-align: center;
    width: 130px
}

.learner-table .col-type {
    width: 130px
}

.learner-table .col-stat {
    width: 44px
}

.learner-table .col-total {
    width: 54px
}

.learner-table img {
    width: 54px;
    height: 54px;
    image-rendering: pixelated;
    object-fit: contain;
    display: block;
    margin: auto;
}

.learner-table .poke-name {
    text-align: center
}

.learner-table .poke-name a {
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    font-size: .95rem;
}

.learner-table .poke-name a:hover {
    color: var(--accent)
}

.learner-table th:first-child,
.learner-table td:first-child {
    text-align: left
}

.learner-table th:last-child,
.learner-table td:last-child {
    text-align: right;
    padding-right: 1.5rem;
}

/* Move index table */
.move-index-table {
    font-size: .95rem
}

.move-index-table th {
    cursor: pointer;
    user-select: none;
    text-align: center
}

.move-index-table th:hover {
    color: var(--accent)
}

.move-row {
    cursor: pointer;
    transition: background .15s
}

.move-row:hover td {
    background: rgba(255, 255, 255, 0.04)
}

.move-index-table .poke-name a {
    color: var(--text);
    text-decoration: none;
    font-weight: 800
}

.move-index-table .poke-name a:hover {
    color: var(--accent)
}

/* Alternative Forms Switching Animation */
.form-layout-panel {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide forms selector elements next to sprite selector unless list view is active */
html:not([data-view-mode="list"]) .forms-divider,
html:not([data-view-mode="list"]) #btn-toggle-alt-forms {
    display: none !important;
}

/* Always Visible Debug Filter Styling */
#filter-group-debug {
    background: rgba(255, 159, 67, 0.03);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border) !important;
}

/* Pre-open the filter panel before JS loads, set by the inline <head> script when
   localStorage says the panel was left open. This fires before the body renders so
   the panel appears at full height on first paint with no animation. JS will then
   remove this attribute and hand control to the .open class system. */
html[data-filter-open="1"] #filter-panel,
html[data-filter-open="1"] #move-filter-panel {
    max-height: 800px;
    border-top: 1px solid var(--border);
    transition: none;
    /* suppress slide-in on page load */
}

/* Highlight the Filters button to match the pre-opened panel state before JS loads. */
html[data-filter-open="1"] #btn-filters,
html[data-filter-open="1"] #btn-move-filters {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Hide ALL Pokémon cards and list rows before JS loads if there are active saved filters.
   Set by the inline <head> script when localStorage has active type/gen/egg/multi-form
   selections. After app.js calls applyFilter() (which stamps display:none on non-matching
   cards via inline style) and then removes this attribute, only the matching cards become
   visible — no flash of unfiltered content. */
html[data-filter-hide-all="1"] #pokemon-grid .pokemon-card,
html[data-filter-hide-all="1"] #pokemon-list-body .pokemon-row,
html[data-filter-hide-all="1"] #move-index-body .move-row {
    display: none;
}

/* ==========================================================================
   14. Pokemon Mystery Dungeon (PMD) level selector styling
   Custom hybrid input/dropdown component to choose Level (1-100).
   Looks like one unified input field with an arrow dropdown button.
   ========================================================================== */

/* Custom hybrid level selector wrapper.
   Aligns the label ("Lv.") and the input container side-by-side. */
.pmd-level-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    user-select: none;
}

/* Level label styling (e.g., "Lv.") to match the muted text style. */
.pmd-level-label {
    font-family: var(--font);
    font-weight: 800;
    color: var(--text-dim);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Container for the hybrid input field.
   Acts as the unified visual border box. */
.pmd-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 95px;
    /* slightly wider to fit spinner buttons */
    height: 42px;
    /* aligns height with search and filter buttons */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Highlight the whole container border when any child (like the input) is focused. */
.pmd-input-container:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(124, 131, 245, 0.2);
}

/* The actual text/number input field.
   Removes default borders, backgrounds, and spinner arrows so it blends into the container. */
.pmd-level-input {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--mono);
    /* monospaced font for numbers */
    font-size: 1rem;
    font-weight: 700;
    padding: 0 0.25rem 0 0.5rem;
    width: calc(100% - 30px);
    height: 100%;
    outline: none;
    text-align: center;
    -moz-appearance: textfield;
    /* hides spinner arrows on Firefox */
    appearance: textfield;
    /* standard property for compatibility */
}

/* Hide webkit spinner arrows for Chrome, Safari, Edge, Opera */
.pmd-level-input::-webkit-outer-spin-button,
.pmd-level-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Container for stacked spinner buttons on the right */
.pmd-spinner-buttons {
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 100%;
    border-left: 1px solid var(--border);
}

/* Base style for custom spin buttons */
.pmd-spin-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.55rem;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    outline: none;
}

/* Hover effect on spin buttons */
.pmd-spin-btn:hover {
    background: transparent;
    color: var(--accent);
}

/* Style of top button inside spinner */
.pmd-spin-btn:first-child {
    border-top-right-radius: 9px;
    border-bottom: 1px solid var(--border);
}

/* Style of bottom button inside spinner */
.pmd-spin-btn:last-child {
    border-bottom-right-radius: 9px;
}

/* ──────────────────────────────────────────────────────────────────────────
   15. PMD Effort Column Toggle Styling
   By default, we hide the Effort column (both header and data cells) on the
   Pokemon Mystery Dungeon Pokedex table to keep the initial page load clean.
   When the display option is enabled, it adds data-show-effort="true" to the
   <html> element, showing the effort columns.
   ────────────────────────────────────────────────────────────────────────── */

/* Hide Effort column by default */
.pmd-effort {
    display: none !important;
}

/* Display Effort column when active */
html[data-show-effort="true"] .pmd-effort {
    display: table-cell !important;
}