.pokedex-counter {
    font-weight: bold;
}

/* Responsive grid: 2 columns on phones up to 6 on large screens. */
.pokedex-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 769px) {
    .pokedex-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .pokedex-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1216px) {
    .pokedex-grid { grid-template-columns: repeat(6, 1fr); }
}

.pokedex-grid .pokedex-cell {
    margin: 0;
    height: 100%;
}

/* --- Filters --- */
.pokedex-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.pokedex-filter-label {
    font-weight: bold;
    margin-right: 0.25rem;
}

.pokedex-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}

.pokedex-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pokedex-type-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border: 2px solid var(--type-color, #999);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    text-transform: capitalize;
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* Hide the native checkbox — the pill itself is the control. */
.pokedex-type-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pokedex-type-toggle.is-selected {
    background-color: var(--type-color, #999);
    color: #fff;
}

.pokedex-type-toggle input:disabled + * ,
.pokedex-type-toggle:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Per-type accent colour, reused from the type badge palette. */
.pokedex-type-toggle.type-normal   { --type-color: var(--type-normal); }
.pokedex-type-toggle.type-fire     { --type-color: var(--type-fire); }
.pokedex-type-toggle.type-water    { --type-color: var(--type-water); }
.pokedex-type-toggle.type-electric { --type-color: var(--type-electric); }
.pokedex-type-toggle.type-grass    { --type-color: var(--type-grass); }
.pokedex-type-toggle.type-ice      { --type-color: var(--type-ice); }
.pokedex-type-toggle.type-fighting { --type-color: var(--type-fighting); }
.pokedex-type-toggle.type-poison   { --type-color: var(--type-poison); }
.pokedex-type-toggle.type-ground   { --type-color: var(--type-ground); }
.pokedex-type-toggle.type-flying   { --type-color: var(--type-flying); }
.pokedex-type-toggle.type-psychic  { --type-color: var(--type-psychic); }
.pokedex-type-toggle.type-bug      { --type-color: var(--type-bug); }
.pokedex-type-toggle.type-rock     { --type-color: var(--type-rock); }
.pokedex-type-toggle.type-ghost    { --type-color: var(--type-ghost); }
.pokedex-type-toggle.type-dragon   { --type-color: var(--type-dragon); }
.pokedex-type-toggle.type-dark     { --type-color: var(--type-dark); }
.pokedex-type-toggle.type-steel    { --type-color: var(--type-steel); }
.pokedex-type-toggle.type-fairy    { --type-color: var(--type-fairy); }

.pokedex-generations {
    overflow-x: auto;
}

.pokedex-cell {
    position: relative;
}

.pokedex-cell-icon .species-icon {
    image-rendering: pixelated;
}

/* Captured: full colour, name and a checkmark badge. */
.pokedex-check {
    position: absolute;
    top: 8px;
    right: 12px;
    color: #48c774;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
}

/* Shiny captured: the star replaces the checkmark and the tile gets a warm
   ring, so a shiny reads as such while scanning a full generation. */
.pokedex-check--shiny {
    color: #f5b301;
    text-shadow: 0 0 4px rgba(245, 179, 1, 0.8);
}

.pokedex-cell--shiny {
    box-shadow: 0 0 0 2px #f5b301;
}

.pokedex-counter-shiny {
    color: #f5b301;
    margin-left: 0.75rem;
}

.pokedex-shiny-note {
    color: #f5b301;
    font-weight: bold;
}

/* Encountered but not captured: still hidden by name, icon slightly faded. */
.pokedex-cell--seen .species-icon {
    opacity: 0.55;
}

/* Never encountered: greyed-out silhouette. */
.pokedex-cell--unseen .species-icon {
    filter: brightness(0);
    opacity: 0.3;
}

/* --- Entry portrait ------------------------------------------------------ */

/* The entry page draws the full animated sprite, whose frames are trimmed
   individually and so differ in size from one frame to the next (the sprite
   controller writes each frame's width/height onto the element). Laid out
   normally that would resize the column ten times a second and shove the rest
   of the page around, so the stage is a fixed box and the sprite is taken out
   of flow inside it. Bottom-centred: the trimming eats into the top of the
   frame as the pokemon breathes, so anchoring the feet is what holds still. */
.pokedex-sprite-stage {
    position: relative;
    /* The tallest frame in the asset tree is 124px, i.e. 248px at scale 2 —
       tall enough that no sprite ever reaches out of the box. */
    height: 260px;
    margin-bottom: 0.5rem;
}

.pokedex-sprite-stage .pokemon-sprite {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    image-rendering: pixelated;
}