#no-results {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-heading);

    .message {
        font-size: 18px;
    }
}


.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-repeat: no-repeat;
    background-position: center;

    background-color: color-mix(in oklab, var(--bg1), transparent 75%);
    /* background-blend-mode: soft-light;
    background-image: radial-gradient(circle, var(--bg-color) 0%, transparent 100%); */

    padding: 0.5rem;
    border-radius: 0.5rem;

    gap: 0.5rem;

    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;

    .card-title {
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        white-space: nowrap;
        overflow-x: clip;
        text-overflow: ellipsis;
        text-align: center;

        color: var(--text-heading);

        .dexNr {
            opacity: 0.6;
            font-weight: 400;
        }
    }

    & img {
        overflow: hidden;
        margin-top: auto;
        margin-bottom: auto;
        max-width: calc(100% - 1rem);
        /* explicit width/height because theres so many of these */
        width: 137px;
        height: 137px;
        /* max-height: calc(100% - 4rem); */
    }

    .attributes {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.25rem;
        padding-left: 0.3rem;

        display: flex;
        align-items: center;

        border-bottom-left-radius: 8px;
        border-top-right-radius: 8px;

        background-color: var(--primary-shady);
        box-shadow: -2px 2px 6px 0px rgba(0, 0, 0, 0.1);

        .attribute {
            display: flex;
            align-items: center;
            gap: 0.3rem;

            font-weight: 500;

            color: var(--text-heading);


            .material-symbols-rounded {
                font-size: 18px;
            }
        }

        .attribute.functional {
            color: var(--bg2);

            .material-symbols-rounded {
                text-shadow: 0px 0px 3px var(--text2);
            }
        }

    }

    .attributes:has(.functional) {
        background: linear-gradient(45deg in oklab, #ff33c4, #fff983, #00ded6);
        box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.2);
    }


}

.card.unknown {
    opacity: 0.5;
}

.card:hover {
    background-color: color-mix(in srgb, var(--bg2), transparent 80%);
    opacity: 1;

    .type-icons {
        opacity: 1;
    }
}

.card:active {
    background-color: color-mix(in srgb, var(--bg3), transparent);
}

@media (max-width: 579px) {
    .card {
        gap: 0;
        padding: 0.25rem;

        .card-title {
            font-size: 14px;

            .dexNr {
                position: absolute;
                top: 4px;
                left: 4px;
            }
        }

        .attributes {

            .attribute {
                .text {
                    font-size: 14px;
                }

                .material-symbols-rounded {
                    font-size: 16px;
                }
            }
        }
    }
}


.logo-landscape {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    line-height: 1;
    margin-right: 2px;
    margin-bottom: 0.5rem;
    color: var(--text-heading);

    svg {
        height: 2.25rem;
        aspect-ratio: 1;
        margin-right: 0.5rem;
        /* filter: brightness(1.25); */
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
        /* border-radius: 100%; */
        &:hover {
            transform: rotate(-15deg);
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
            /* box-shadow: 0 0 10px rgba(255,255,255, 0.25); */
        }
    }

    .logo-text {
        display: flex;
        flex-direction: column;

        .text-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .text-sub {
            line-height: 1.25;
            font-weight: 400;
            font-size: 0.8rem;
            font-style: italic;
            opacity: 0.75;
        }
    }
}

.search-bar {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    /* border: solid 2px color-mix( in srgb, var(--bg3), transparent 90%); */
    border-radius: 8px;
    height: 2.25rem;
    background-color: color-mix( in srgb, var(--bg2), transparent 50%);

    backdrop-filter: var(--color-blur);

    .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        height: 100%;
    }

    & input {
        font-family: var(--font-family);
        flex-grow: 1;
        font-size: 18px;
        background-color: transparent;
        color: var(--text-heading);
        outline: none;
        border: none;

        &::placeholder {
            color: var(--text1);
        }
    }

    &:hover {
        background-color: color-mix(in srgb, var(--bg2), transparent 60%);
    }
}

@media (max-width: 579px) {
    .search-bar {
        padding-left: 0.25rem;
        border-radius: 2rem;
        min-width: 0;
        .material-symbols-rounded {
            font-size: 1.4rem;
        }

        width: auto;

        & input {
            width: auto;
            min-width: 0;
        }
    }

    .sort-icon {
        border-radius: 4rem !important;
    }

    #search-sort-by {
        margin-left: auto;
    }
    
}

.sort-icon {
    /* border: solid 2px color-mix( in srgb, var(--bg3), transparent 90%); */
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: 8px;
    background-color: color-mix( in srgb, var(--bg2), transparent 50%);
    cursor: pointer;

    backdrop-filter: var(--color-blur);

    &:hover {
        background-color: color-mix(in srgb, var(--bg2), transparent 60%);
    }

}

.sort-icon.active,
.search-bar.active,
.dex-selector>.option.active {
    color: var(--primary);  
    border-color: var(--primary);
    filter: drop-shadow(inset 0px 0px 3px var(--primary));
}

.dex-selector {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    height: 2.25rem;

    border-radius: 8px;
    /* border: solid 2px var(--bg3); */
    background-color: color-mix( in srgb, var(--bg2), transparent 50%);
    cursor: pointer;

    margin-left: auto;

    backdrop-filter: var(--color-blur);

    .option {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        height: 100%;
        width: 2.25rem;
        border-radius: 6px;

        & img {
            max-height: 1.5rem;
            max-width: 1.5rem;
        }

        &:hover {
            background-color: color-mix(in oklab, var(--bg1), transparent 75%);
        }
    }

    .option:not(.active) {
        display: none;
    }

  
}

.dex-selector.open {
    .option:not(.active) {
        display: flex;
    }
}

.dex-selector.active {
    color: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 579px) {
    .dex-selector {
        margin-left: 0;
        border-radius: 4rem;
    }
}


.pokemon-layout {
    position: relative;
    display: grid;
    grid-template-areas:
        "brief details";
    grid-template-columns: 300px 1fr;
    grid-template-rows: calc(100vh - 1rem);
    gap: 0.5rem;
    padding: 0.5rem;


    .brief {
        grid-area: brief;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .details {
        grid-area: details;
        display: grid;
        background-color: color-mix(in srgb, var(--bg2) 50%, transparent);
    }

    .brief,
    .details {
        gap: 0.5rem;
        border-radius: 0.5rem;
        
    }

}

@media (max-width: 579px) {
    .pokemon-layout {
        grid-template-areas:
            "brief"
            "details";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        .background {
            background-size: contain !important;
            background-position: top center;
        }
    }
}


.info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--bg2) 50%, transparent);
    color: var(--text-heading);

    .title {
        font-size: 1.5rem;
        font-weight: 600;
        color: white;
        opacity: 0.9;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding-top: 1rem;

        .dex-nr {
            opacity: 0.75;
        }
    }
}

.form-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & input[type="radio"]:checked + label {
        background-color: var(--primary);
        color: var(--bg2);
    }

    & input[type="radio"] {
        display: none;
    }

    
}

.showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 0;
    gap: 0.5rem;

    border-radius: 8px 8px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .family {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;

        .family-nav-item {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;

            height: 2rem;

            background-color: color-mix(in srgb, var(--bg1) 50%, transparent);
            padding: 0.25rem;
            border-radius: 0.5rem;
        }

        .family-nav-item.left {
            justify-content: flex-start;
        }

        .family-nav-item.right {
            justify-content: flex-end;
        }
    }


    .mega-icon {
        position: absolute;
        height: 2rem;
        aspect-ratio: 1;
        bottom: 0;
        left: 0.25rem;
        filter: sepia(1) saturate(7) hue-rotate(284deg) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
    }

    .pokemon-image {
        max-height: 256px;
        filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.2));
    }
    
}

.types {
    display: flex;
    gap: 0.5rem;
    /* background-color: color-mix(in srgb, var(--bg1) 75%, transparent); */
    /* padding: 0.25rem; */
    border-radius: 4rem;
    position: absolute;
    bottom: -24px;
    z-index: 1;

    .icon {
        aspect-ratio: 1;
        height: 2rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }
}


.stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    .stat {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        justify-items: center;
        gap: 0.5rem;

        .stat-name {
            font-weight: 500;
        }

        .stat-value {
            font-weight: 600;
        }

        .stat-bar {
            flex-grow: 1;
        }
    }

}


.moves {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.moveset {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-radius: 0.5rem;

    .title {
        font-size: 16px;
        font-weight: 600;
        padding: 0.25rem;
        align-self: flex-start;
    }
}

.moveset:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    outline: solid 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.move {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;

    .move-type {
        height: 1.5rem;
        aspect-ratio: 1;

        display: flex;
        align-items: center;
        justify-content: center;


        & img {
            max-height: 100%;
            max-width: 100%;
        }
    }
}

.move.legacy {
    background: linear-gradient(314deg, #82adf9, #c68bf8);
    border-radius: 0.25rem;
    box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.1), 0px 0px 30px rgba(255, 51, 255, 0.1);
    z-index: 2;
    position: relative;
    color: #000c0c;
    font-weight: 420;
    padding: 2px;
    margin: 2px;
    

    .legacy-effect {
        position: absolute;
        transform: rotate(-90deg);
        mix-blend-mode: screen;
        right: 0;
        height: 100%;
        border-radius: 0.25rem;
        mask-image: linear-gradient(90deg, transparent, white);
    }
    
}

.move.legacy::before {
    content: "";
    position: absolute;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    border-radius: 6px;
    background-image: linear-gradient(35deg, #f990e9, #8fedf8);
    z-index: -1;
    inset: -2px;
    mix-blend-mode: darken;
}

.types-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;

    .icon {
        margin: 0.5rem;
    }

    .card-title {
        font-size: 16px;
        font-weight: 400;
        color: var(--text1);
    }
}