.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;
}

/* 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;
}