@media all and (max-width: 600px) {
    #grid>.gridItem {
        .name {font-size: 1.5em;}
        .number {font-size: 1em;}
    }
    #infoPopup {
        #infoTitle {font-size: 1.5em;}
        #infoInnerContainer {margin-inline: 5%;}
        #infoPopupDescription {font-size: 1em;}
    }
}

@media all and (min-width: 600px) {
    #grid>.gridItem {
        .name {font-size: 2em;}
        .number {font-size: 1.25em;}
    }
    #infoPopup {
        #infoTitle {font-size: 2em;}
        #infoInnerContainer {margin-inline: 10%;}
        #infoPopupDescription {font-size: 1.3em;}
    }
}

body {
    min-width: fit-content;
}

#infoPopupContainer {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    top: 0;
    left: 0;
    overflow-y: scroll;

    --transition-speed: 0.5s;

    &:focus {outline: none;}
    &[open].open, &[open].open::backdrop {opacity: 1; visibility: visible;}
    &:not([open]) {opacity: 0; visibility: hidden; pointer-events: none;}

    transition-property: opacity, visibility;
    transition-duration: var(--transition-speed);
    transition-timing-function: ease;
    transition-delay: 0s;

    background-color: transparent;
    border: none;
    &::backdrop {
        display: block;
        opacity: 0;
        backdrop-filter: blur(5px) brightness(0.25);
        -webkit-backdrop-filter: blur(5px) brightness(0.25);
        transition-property: opacity;
        transition-duration: var(--transition-speed);
        transition-timing-function: ease;
        transition-delay: 0s;
    }

    #closePopupContainer{
        position: fixed;
        --min-size: 5vmin;
        top: calc(var(--min-size)/2);
        right: calc(var(--min-size)/2 + 10px);
        height: var(--min-size);
        width: var(--min-size);
        border-radius: var(--min-size);

        z-index: 3;

        #closePopup {
            height: 100%;
            width: 100%;
            cursor: pointer;
            transform: rotate(45deg);
            mask-image: url("/images/other_assets/cross.svg");
            mask-size: 100% 100%;
            appearance: unset;
            border: none;
            box-shadow: var(--standard-shadow);
            &:hover {filter: brightness(0.8);}
            &:active {filter: brightness(0.7);}
            &:focus-visible {outline: none;}
        }
        &:has(:focus-visible) {outline: var(--focus-outline);}
    }

    scrollbar-color: white transparent;
}

body:has(#infoPopupContainer.open) {overflow: hidden;}

#grid-options-container {
    width: min(90%, 1200px);
    margin: 15px auto 30px;
}

#search-options-container {
    margin-block-end: 20px;
    border-radius: 50px;
    box-sizing: content-box;
    padding: 2rem;

    #basic-search-options {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(7.5em,1fr));
        gap: 20px;

        >.search-sort-wrapper:last-child {
            grid-column-end: -1;
            justify-content: end;
        }

        .search-sort-wrapper {
            display: flex;
            flex-wrap: nowrap;
            /*min-width: fit-content;*/
            align-items: center;
            p {margin-block: 0;}

            label {
                text-wrap: nowrap;
            }

            .sort-arrow {
                font-size: 1.5em;
                line-height: 1em;
                height: 2em;
                width: 2rem;
                padding: 0;
                aspect-ratio: 1;
                cursor: pointer;
                user-select: none;
                transition: transform 0.25s ease-in-out;
                &.Descending {transform: rotate(180deg);}
                appearance: none;
                background: none;
                border: none;
                text-align: center;
                font-family: var(--font-marugo), sans-serif;
            }

            .advanced-search-toggle {
                cursor: pointer;
                background: none;
                border: none;
                font-family: inherit;
                font-size: inherit;
                .downArrow {
                    transition: transform 0.25s ease-in-out;
                    display: inline-block;
                    aspect-ratio: 1;
                    border-radius: 100%;
                }
            }
        }

        input, select {
            border: none;
            /*min-width: 200px;*/
            text-overflow: ellipsis;
            border-bottom: 1px solid black;
            /*border-radius: 100px;*/
            background: none;
            font-family: var(--font-marugo), sans-serif;
            font-size: 1rem;
            line-height: 1rem;
            margin-inline-start: 0.5rem;
            padding-inline-start: 0.5rem;
            flex-grow: 1;
        }

        select, option {
            cursor: pointer;
            appearance: none;
            height: 100%;
            text-overflow: ellipsis;
            option {
                padding-inline-start: 1rem;
            }
        }


        .advanced-search-container {
            grid-column-start: 1;
            grid-column-end: -2;
        }
    }

    div:has(~ .advanced-search-container.open), div:has(~ .advanced-search-container :focus-visible) {
        .advanced-search-toggle .downArrow {
            transform: rotate(-180deg);
        }
    }

    #advanced-search-container, .advanced-search-item-wrapper, .advanced-search-item-wrapper * {
        transition-property: opacity, font-size, max-height, margin-top, row-gap;
        transition-duration: 0.1s, 0.25s;
        transition-timing-function: ease-in-out;
    }

    #advanced-search-container.open, #advanced-search-container.open .advanced-search-item-wrapper,
    #advanced-search-container.open .advanced-search-item-wrapper *{
        transition-property: opacity, font-size, max-height, margin-top, row-gap;
        transition-duration: 0.1s, 0.25s, 0.25s, 0.25s, 0.25s;
        transition-timing-function: ease-in-out;
        transition-delay: 0.15s, 0s, 0s, 0s, 0s;
    }


    #advanced-search-container {
        width: 100%;
        display: flex;
        flex-flow: row wrap;

        column-gap: 2rem;
        row-gap: 0.5rem;
        margin-top: 10px;

        &:not(.open):not(:has(:focus-visible)) {
            /*font-size: 0;*/
            /*max-height: 0;*/
            opacity: 0;
            margin-top: 0;
            row-gap: 0;

            overflow-y: hidden;
            .advanced-search-item-wrapper {
                row-gap: 0;
                &>* {max-height: 0;}
            }
        }

        .advanced-search-item-wrapper {
            display: flex;
            flex-flow: row nowrap;

            &.movesFilter {
                flex-wrap: wrap;
            }

            #rankFilter {
                .inline-icon {height: 2em;}
            }

            gap: 0.5em;
            &>* {max-height: 3em;}
            &>span {overflow: hidden;}


            .search-option-label {
                flex-shrink: 0;
            }

            multi-select {
                width: var(--select-width);
                .multi-select-header {
                    border-bottom: 1px solid black;
                }
            }
        }
    }
}

#grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(300px,100vw),1fr));
    grid-auto-rows: 10em;
    grid-column-gap: 30px;
    grid-row-gap: 30px;

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

    * {text-align: center};
}

#grid>.gridItem {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 10em;
    box-sizing: border-box;
    padding-inline: 2em;
    cursor: pointer;
    box-shadow: var(--standard-shadow);
    overflow: hidden;
    &:active{box-shadow: none;}
    &.hidden{display: none;}

    border-width: 5px;
    border-style: solid;

    appearance: none;

    .gridItemIcon {
        height: 60%;
        width: auto;
        pointer-events: none;
        user-select: none;
        aspect-ratio: 1;
    }

    .name {
        font-family: var(--font-marugo), sans-serif;
        line-height: 1;
        width: auto;
        text-align: left;
        flex-grow: 1;
        font-weight: 600;
    }

    .number {
        font-family: var(--font-yuruka), sans-serif;
        position: absolute;
        align-self: end;
        justify-self: stretch;
        margin-bottom: 5px;
    }
}

#infoPopup::before, #infoPopup::after {
    content: "";
    width: 100.2%;
    height: 50px;
    position: absolute;

    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    background-image: linear-gradient(0deg, black 0%, black 30%, #391849 100%);
    mask: url("/images/other_assets/topDecoration.svg");
    mask-repeat: repeat-x;
    mask-size: auto 50px;
}

#infoPopup::before {
    top: -1px;
    left: -0.1%;
}

#infoPopup::after {
    bottom: -1px;
    right: -0.1%;
    transform: rotate(180deg);
}

#infoPopup {
    position: relative;
    background-color: white;
    width: min(95%, 800px);
    margin: 50px auto 50px auto;
    border-radius: 50px;
    padding-block: 40px;

    font-family: var(--font-marugo), sans-serif;

    img.loading {visibility: hidden};

    #infoInnerContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-block: 30px;
    }

    #infoTitle {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 300;
        text-align: center;
        line-height: 1.5;
        #infoName {
            font-weight: 900;
            font-family: var(--font-marugo), sans-serif;
        }
        z-index:2;

        &.noNumber .numberComponents{display: none;}
    }

    #infoPopupDescription {
        text-align: center;
        &.noDesc {display: none};
    }

    #movesSoultimateWrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: fit-content;
    }

    #statsSkill {
        width: fit-content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        align-items: stretch;
        justify-items: stretch;
        text-align: center;
        row-gap: 10px;

        .hexagonTitle, .stat, #skillName {
            display: flex;
            align-items: center;

            &.hexagonTitle, &.stat {justify-content: center}
            &#skillName {justify-content: left}
        }

        .statData {
            position: relative;
            font-family: var(--font-yuruka), sans-serif;
            display: grid;
            grid-template-columns: 1fr 1fr;
            line-height: 1;
            align-items: stretch;
            justify-items: stretch;
            :not(hr) {z-index: 1};
            hr {position: absolute; bottom: 0; left:5.5%; width: 85%; z-index: 0; height: 3px; border-radius: 3px; border: none; margin: 0}
            .stat {margin-right: 15px};
            &.HP hr {background: rgb(22,158,0)}
            &.STR hr{background: #a01818;}
            &.SPR hr{background: #6d18a0;}
            &.DEF hr{background: #093cb3;}
            &.SPD hr{background: #139b8a;}
            &.Skill hr{background: #a46207;}

            &.SPD .stat {letter-spacing: -0.05em;}
        }
        .elements{
            font-family: var(--font-yuruka), sans-serif;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            line-height: 1;
            align-items: center;
            position: relative;
            :not(hr) {z-index: 1};
            hr {position: absolute; bottom: 0; width: 40%; z-index: 0; height: 3px; border-radius: 3px; border: none; margin: 0}
            hr.strongEL{background: rgb(22,158,0); left: 2.5%}
            hr.weakEL{background: #a01818; left: 52.5%}
            .strongEL {color: rgb(22,158,0)}
            .weakEL {color: #a01818}
        }
        .skillTitle {
            font-family: var(--font-marugo),sans-serif;
            position: relative;
            line-height: 1;
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            #skillName {
                grid-column: span 3;
                font-weight: 500;
                text-align: left;
                margin-left: 20px;
            }
            :not(hr) {z-index: 1};
            hr {position: absolute; bottom: 0; left:5.5%; width: 89%; z-index: 0; height: 3px; border-radius: 3px;
                border: none; margin: 0; background: #a46207;}
        }
        #skillDescriptionContainer {
            font-family: var(--font-marugo), sans-serif;
            grid-column: span 2;
            text-wrap: wrap;

            max-width: 100% !important;
        }


    }

    #Movelist {
        display: grid;
        grid-auto-rows: var(--move-height);
        gap: 10px;
        min-width: 70%;

        .move {
            min-width: min-content;
            max-width: 100%;
            text-overflow: ellipsis;
            position: relative;
            display: flex;
            height: var(--move-height);

            .moveIconContainer {
                height: var(--move-height);
                width: var(--move-height);
                mask-image: url("/images/other_assets/regularHexagon.svg");
                mask-size: 100% 100%;
                mask-position: center center;
                mask-repeat: no-repeat;
                margin-right: 5px;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
                img {
                    height: 80%;
                }
            }
            .moveHexagonBorder {
                height: calc(var(--move-height) + 0.5em);
                width: calc(var(--move-height) + 0.5em);
                position: absolute;
                top: -0.25em;
                left: -0.25em;
                mask-image: url("/images/other_assets/regularHexagon.svg");
                mask-size: 100% 100%;
                mask-position: center center;
                mask-repeat: no-repeat;
                z-index: 1;
            }
            .moveNameContainer {
                max-width: 100%;
                text-overflow: ellipsis;
                font-family: var(--font-marugo), sans-serif;
                align-self: flex-end;
                margin-left: calc(var(--move-height) / 2);
                margin-bottom: 1%;
                padding-left: calc(var(--move-height) / 2 + 10px);
                padding-right: 1em;
                min-width: calc(100% - var(--move-height) - 30px); height: 65%;
                margin-right: 20px;
                border-radius: 0 500px 500px 0;
                z-index: 0;
                background-image: url("/images/other_assets/moveDecoration.png");
                background-size: auto 50%;
                background-repeat: repeat-x;
                background-position-y: bottom;

                .moveName {
                    max-width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    height: 100%;
                    line-height: 100%;
                    box-sizing: border-box;
                }
            }
        }

        .AMove {
            grid-column: 1/-1;
            .moveIconContainer {background-color: #f26635}
            .moveNameContainer {background-color: #eeb69f}
            .moveHexagonBorder {background-color: #994433;}
        }
        .XMove {
            .moveIconContainer {background-color: #2fb3e5}
            .moveNameContainer {background-color: #6facee}
            .moveHexagonBorder {background-color: #1c7798;}
        }
        .YMove {
            .moveIconContainer {background-color: #48c427}
            .moveNameContainer {background-color: #85e875};
            .moveHexagonBorder {background-color: #3c7e2b};
        }
        .learnableMove {
            .moveIconContainer {background-color: #ac51f7}
            .moveNameContainer {background-color: #cda5ee}
            .moveHexagonBorder {background-color: #6a4489}
        }
        .noMove {
            img, .moveName {display: none;}
            .moveIconContainer {background-color: #aaaaaa}
            .moveNameContainer { background-color: #cccccc;}
            .moveHexagonBorder {background-color: #888888}
            .moveName {display: none;}
        }
    }

    #soultimateMoveData {
        display: flex;
        flex-direction: column;
        min-width: 70%;

        .moveTitle {
            height: var(--move-height);
            position: relative;
            display: flex;

            .SoultimateIconWrapper {
                height: var(--move-height);
                width: var(--move-height);
                position: absolute;
                top: 0;
                left: 0;

                .SoultimateIconContainer {
                    height: 100%;
                    width: calc(var(--move-height)*1.8);
                    background-image: linear-gradient(0deg, #fff49f 0%, #ffe659 20%, #b8a23e 40%, #ffe861 50%, #ffffd3 100%);
                    mask-image: url("/images/other_assets/soultimateIconOutline.svg");
                    mask-size: auto 100%;
                    mask-position: right;
                    -webkit-mask-position: right;
                    mask-repeat: no-repeat;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                    img {
                        height: 100%;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                    .SoultimateIconText {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        height: 50%;line-height: 100%;
                        font-family: var(--font-marugo), sans-serif;
                        display: flex;
                        align-items: center;
                        letter-spacing: -0.5px;
                        padding-left: 10%;
                    }
                }
            }


            .soultimateIconBorder {
                height: calc(var(--move-height) + 0.5em);
                width: calc(var(--move-height)*1.8 + 0.5em);
                position: absolute;
                top: -0.25em;
                right: -0.25em;
                background-color: transparent;
                mask-image: url("/images/other_assets/soultimateIconOutline.svg");
                mask-size: auto 100%;
                mask-position: right;
                mask-repeat: no-repeat;
                z-index: 1;
            }
            .moveNameContainer {
                font-family: var(--font-marugo), sans-serif;
                align-self: flex-end;
                margin-left: calc(var(--move-height) / 2);
                margin-bottom: 1%;
                padding-left: calc(var(--move-height) / 2 + 10px);
                padding-right: 1em;
                min-width: calc(100% - var(--move-height) - 30px); height: 65%;
                margin-right: 20px;
                border-radius: 0 500px 500px 0;
                z-index: 0;
                background-image: url("/images/other_assets/moveDecoration.png");
                background-size: auto 50%;
                background-repeat: repeat-x;
                background-position-y: bottom;
                background-color: #fff49f;

                .moveName {
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    height: 100%;
                    line-height: 100%;
                    box-sizing: border-box;
                }
            }
        }
        .moveDescription, .inspirit {
            font-family: var(--font-marugo), sans-serif;
            text-align: center;
        }

        .soultimateMoveDetails {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            width: fit-content;
            min-width: 60%;
            margin-block: 15px;
            align-self: center;

            align-items: center;
            justify-items: center;
        }

        .soultimateMoveInfo {
            width: min-content;
            min-width: 50%;
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            .infoTitle {
                font-size: 1em;
                line-height: 1.5;
                background-color: #cbcbcb;
                letter-spacing: -0.5px;
                mask-image: url("/images/other_assets/stretchedHexagon.svg");
                mask-size: auto 100%;
                mask-position: center;
                mask-repeat: no-repeat;
                font-family: var(--font-standard), sans-serif;
                font-weight: bold;

                min-width: min-content;
                white-space: nowrap;

                aspect-ratio: 230/70;
            }
            .infoValue {
                &.text {font-family: var(--font-marugo), sans-serif;}
                &.numeric {font-family: var(--font-yuruka), sans-serif;}
            }
        }

        &.Status {.notStatus{display: none;}}
        &.Heal {.notHeal{display: none;}}

    }

    #tierData {
        margin-top: 20px;

        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;

        #tierContainer {
            font-size: 2em;
            font-family: var(--font-yuruka), sans-serif;
            position: relative;
            z-index: 0;
            line-height: 1;

            #tierShadow {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                text-shadow: 2px 2px 0 black;
                z-index: -1;

                &:has(~ #tier.Sppp) {text-shadow: 2px 2px 0 rgba(100,209,248,1);}


            }

            #tier {
                background-size: auto 100%;
                background-clip: text;
                color: black;
                -webkit-text-stroke-width: 1px;
                -webkit-text-fill-color: transparent;
                z-index: 0;

                &.Spp {background-image: linear-gradient(167deg, rgba(255,171,0,1) 0%, rgba(255,255,40,1) 25%, rgba(130,239,248,1) 100%); }
                &.Sp {background-image: linear-gradient(166deg,rgba(255, 82, 114, 1) 10%, rgba(214, 9, 108, 1) 44%, rgba(255, 82, 177, 1) 92%);}
                &.S {background-image: linear-gradient(168deg, #013cfe 23%, #00e4ff 50%, #013cfe 77%);}
                &.A {background-image: linear-gradient(to bottom,white 0%,#f9bb00 66%,#fef767 100%)}
                &.B {background-image: linear-gradient(to bottom,#ff3b29,#ffc72a);}
                &.C {background-image: radial-gradient(circle, #2AF359 91%, #CAFCD5 100%);}
                &.D {background-image: radial-gradient(circle, #00c0ff 91%, #9fe7ff 100%);}
                &.E {background-image: radial-gradient(circle, #bbbbbb 91%, #eaeaea 100%);}
                &.F {background-image: radial-gradient(circle, #8e7f6c 91%, #b2a99d 100%);}
            }
        }


        #metaDescription {
            text-align: justify;
        }


    }
}