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

@media all and (max-width: 600px) {
    #infoPopup {
        #rankTribeAttributes {
            --image-size: 2.5em;
        }
        #statsSkill {
            grid-template-columns: 1fr;
            .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) {
    #infoPopup #Movelist {grid-template-columns: 1fr 1fr;}
}

@media all and (min-width: 600px) {
    #infoPopup {
        #rankTribeAttributes {
            --image-size: 4em;
        }
        #statsSkill {
            grid-template-columns: 1fr 1fr;
            .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;}
    }
}

#grid>.gridItem {
    &.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;
    }

    .gridItemIcon:not(.loaded) {visibility: hidden};
}

#grid.tiers>.gridItem {
    color: black;

    &.Spp {
        background: linear-gradient(167deg, rgba(255,171,0,0.7) 0%, rgba(255,255,40,0.7) 25%, rgba(130,239,248,0.7) 100%);
        border-color: rgba(255,171,0,1);
    }
    
    &.Sp {
        background: linear-gradient(166deg,rgba(255, 82, 114, 0.7) 10%, rgba(214, 9, 108, 0.7) 44%, rgba(255, 82, 177, 0.7) 92%);
        border-color: rgba(214, 9, 108, 1);
        color: white;
    }
    &.S {
        background: linear-gradient(168deg, #013cfeb3 23%, #00a4ffb3 50%, #013cfeb3 77%);
        border-color: #013cfe;
        color: white;
    }
    &.A {
        background: linear-gradient(to bottom,#fef767b3 0%,#f9db40b3 66%,#fef767b3 100%);
        border-color: #f9bb00;
    }
    &.B {
		background: linear-gradient(to bottom,#ff8b69b3,#ffc72ab3);
        border-color: #ff3b29;
	}
    &.C {
		background: radial-gradient(circle, #2AF359b3 91%, #CAFCD5b3 100%);
        border-color: #2AF359;
	}
    &.D {
		background: radial-gradient(circle, #00c0ffb3 91%, #9fe7ffb3 100%);
        border-color: #00c0ff;
	}
    &.E {
		background: radial-gradient(circle, #bbbbbbb3 91%, #eaeaeab3 100%);
        border-color: #bbbbbb;
	}
    &.F {
		background: radial-gradient(circle, #8e7f6cb3 91%, #b2a99db3 100%);
        border-color: black;
	}
}



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

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

#infoPopup.legend::before, #infoPopup.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;
}

#infoPopup {
    .yokaiMedal {
        width: min(120px,100%);
    }

    #infoTitle {
        font-family: var(--font-yuruka), sans-serif;
    }

    #costumeSelection {
        &.noCostumes{display: none;}

        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        cursor: pointer;
        padding-inline: 1rem;
        padding-block: 0.5rem;
        border-radius: 2rem;
        text-align: center;
        font-style: italic;

        border: 1px solid gray;
        font-size: 1rem;
        font-family: var(--font-marugo), sans-serif;

        /*background-color: rgba(230,230,230);
        box-shadow: var(--standard-shadow);*/
    }

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

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


    }
}

.yokaiMedal {
    aspect-ratio: 1;
    height: auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        &.medalBackground, &.medalBorder {
            user-select: none;
            pointer-events: none;
            width: calc(100% * 128 / 72);
            top: 0;
            left: 0;
        }

        &.medalFaceIcon {
            width: calc(100% * 64 / 72);
        }

        user-select: none;
        aspect-ratio: 1;
        object-fit: cover;
        position: absolute;
    }
}