@media all and (max-width: 800px) {
    #yokaiInfo #Movelist {grid-template-columns: 1fr;}
}

@media all and (max-width: 600px) {
    #yokaiGrid>.gridItem {
        .name {font-size: 1.5em;}
        .number {font-size: 1em;}
    }
    #yokaiInfo {
        #yokaiInfoTitle {font-size: 1.5em;}
        #yokaiInfoPaddingContainer {margin-inline: 5%;}
        #medalliumBio {font-size: 1em;}
        #rankTribeAttributes {
            --image-size: 2.5em;
        }
        #statsSkill {
            .statData {font-size: 1em;}
            .elements {font-size: 1em; img {height: 1.5em};}
            .skillTitle {font-size: 1em;}
            #skillDescription {font-size: 1em;}
        }
        #Movelist, #soultimateMoveData {
            --move-height: 3em;
        }
        .moveName {font-size: 1.2em;}
        .moveDescription, .inspirit {font-size: 1em;}
        .SoultimateIconText {font-size: 0.7em;}
        .soultimateMoveInfo .infoValue {font-size: 1em;}
    }
}

@media all and (min-width: 800px) {
    #yokaiInfo #Movelist {grid-template-columns: 1fr 1fr;}
}

@media all and (min-width: 600px) {
    #yokaiGrid>.gridItem {
        .name {font-size: 2em;}
        .number {font-size: 1.25em;}
    }
    #yokaiInfo {
        #yokaiInfoTitle {font-size: 2em;}
        #yokaiInfoPaddingContainer {margin-inline: 10%;}
        #medalliumBio {font-size: 1.3em;}
        #rankTribeAttributes {
            --image-size: 4em;
        }
        #statsSkill {
            .statData {font-size: 1.5em;}
            .elements {font-size: 1.2em;img {height: 2em};}
            .skillTitle {font-size: 1.5em;}
            #skillDescription {font-size: 1.2em;}
        }
        #Movelist, #soultimateMoveData {
            --move-height: 4em;
        }
        .moveName {font-size: 1.5em;}
        .moveDescription, .inspirit {font-size: 1.2em;}
        .SoultimateIconText {font-size: 1em;}
        .soultimateMoveInfo .infoValue {font-size: 1.5em;}
    }
}



body {
    min-width: fit-content;
}

#yokaiInfoPopupContainer {
    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(#yokaiInfoPopupContainer.open) {overflow: hidden;}

#yokaiGrid {
    width: min(90%, 1200px);
    margin: 15px auto 30px;

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

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

    &.Brave {
        /*background: linear-gradient(160deg, var(--brave-color) 0%, transparent 160%);*/
        background-color: var(--brave-color);
        border: #ff3f3f solid 5px;
    }

    &.Mysterious {
        /*background: linear-gradient(160deg, var(--mysterious-color) 0%, transparent 160%);*/
        background-color: var(--mysterious-color);
        border: #ffff3f solid 5px;
    }

    &.Tough {
        /*background: linear-gradient(160deg, var(--tough-color) 0%, transparent 160%);*/
        background-color: var(--tough-color);
        border: #ff913f solid 5px;
    }

    &.Charming {
        /*background: linear-gradient(160deg, var(--charming-color) 0%, transparent 160%);*/
        background-color: var(--charming-color);
        border: #ff3f91 solid 5px;
    }

    &.Heartful {
        /*background: linear-gradient(160deg, var(--heartful-color) 0%, transparent 160%);*/
        background-color: var(--heartful-color);
        border: #3fff3f solid 5px;
    }

    &.Shady {
        /*background: linear-gradient(160deg, var(--shady-color) 0%, transparent 160%);*/
        background-color: var(--shady-color);
        border: #3f3fff solid 5px;
    }

    &.Eerie {
        /*background: linear-gradient(160deg, var(--eerie-color) 0%, transparent 160%);*/
        background-color: var(--eerie-color);
        border: #bb3fff solid 5px;
    }

    &.Slippery {
        /*background: linear-gradient(160deg, var(--slippery-color) 0%, transparent 160%);*/
        background-color: var(--slippery-color);
        border: #3fffff solid 5px;
    }

    &.Wicked {
        color: white;
        /*background: linear-gradient(160deg, var(--wicked-color) 0%, transparent 160%);*/
        background-color: var(--wicked-color);
        border: #111111 solid 5px;
    }

    &.Enma {
        color: white;
        /*background: linear-gradient(160deg, var(--enma-color) 0%, transparent 160%);*/
        background-color: var(--enma-color);
        border: #70003a solid 5px;
    }

    img {
        height: 60%;
        width: auto;
        pointer-events: none;
        user-select: none;
    }

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

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

    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    mask: url("/images/other_assets/topDecoration.svg");
    mask-repeat: repeat-x;
    mask-size: auto 50px;
}

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

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

#yokaiInfo.normal::before, #yokaiInfo.normal::after {
    background-image: linear-gradient(0deg, black 0%, black 30%, #391849 100%);
}

#yokaiInfo.rare::before, #yokaiInfo.rare::after {
    background-image:
            linear-gradient(0deg, #fbd92f 10%, black 80%, #391849 100%);
}

#yokaiInfo.legend::before, #yokaiInfo.legend::after {
    background-image:
            conic-gradient(#500ea3 90deg, #5210ce 135deg, #330a9e 225deg, #440a96 315deg),
            conic-gradient(#2b12b7 0deg, #2121be 45deg, #6bc5ff 135deg, #346ed9 225deg, #2f1fd4 315deg, #2919ce 360deg),
            conic-gradient(#49acf6 0deg, #3d90e2 45deg, #4ec2fb 315deg, #49acf6 360deg);
    background-size: 22.22px 22.22px;
    background-position: 0 -9px, 0 12px, 0 34px;
    background-repeat: repeat-x;
}

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

    img.loading {visibility: hidden};

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

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

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

    #yokaiMedal {
        width: min(120px,100%);
        height: auto;
        z-index: 1;
    }

    #rankTribeAttributes {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
        column-gap: 20px;

        img {
            width: var(--image-size);
            max-width: 100%;
        }
        #role {
            div {
                height: var(--image-size);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            img {
                width: calc(var(--image-size) * 2);
                max-width: 100%;
                object-fit: cover;
            }
            grid-column-start: 2;
            grid-column-end: 4;

        }
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-wrap: nowrap;
            gap: 0;
            p {
                font-size: 1em;
                font-style: italic;
                margin-block: 0;
            }
        }
        z-index: 2;
    }

    #medalliumBio {
        font-family: var(--font-marugo), sans-serif;
        text-align: center;
        &.noBio {display: none};
    }

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

    #statsSkill {
        width: auto;
        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;}
        }
        #skillDescription {
            font-family: var(--font-marugo), sans-serif;
            grid-column: span 2;
            text-wrap: wrap;
        }


    }

    #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 {display: none;}
            .moveIconContainer {background-color: #aaaaaa}
            .moveNameContainer { background-color: #cccccc;}
            .moveHexagonBorder {background-color: #888888}
        }
    }

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

    }

}