@media all and (max-width: 600px) {
    #infoPopup {
        #rankTribeAttributes {
            --image-size: 2.5em;
        }
        #stats { .statData {font-size: 1em;} }
        #skillDescription {font-size: 1em;}
        #craftingDataContainer .materialData {--mat-height: 3em;        }
        #craftingDataContainer .baseItem .iconContainer, #craftingDataContainer .upgrade .iconContainer {height: 3em; width: 3em;}
    }
}

@media all and (min-width: 600px) {
    #infoPopup {
        #rankTribeAttributes {
            --image-size: 4em;
        }
        #stats { .statData {font-size: 1.5em;} }
        #skillDescription {font-size: 1.2em;}
        #craftingDataContainer .materialData {--mat-height: 4em;}
        #craftingDataContainer .baseItem .iconContainer, #craftingDataContainer .upgrade .iconContainer {height: 4em; width: 4em;}
    }
}

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

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

/*#infoPopupContainer {
    &:not(.hasDetails) .detail {display: none !important;};
}*/

#grid>.gridItem {

    background-color: transparent;

    &.rank1 {background: rgba(255,255,255,0.7); border-color: black}
    &.rank2 {background-image: linear-gradient(to bottom, rgba(245,228,75,0.7), rgba(255,251,183,0.7)); border-color: black;}
    &.rank3 {background-image: linear-gradient(to bottom, rgba(251,166,64,0.7), rgba(255,255,174,0.7)); border-color: black;}
    &.rank4 {background-image: linear-gradient(to bottom, rgba(242,106,106,0.7), rgba(243,203,203,0.7)); border-color: black;}
    &.rank5 {background-image: linear-gradient(to bottom, rgba(166,115,217,0.7), rgba(225,208,242,0.7)); border-color: black;}
    &.rank6 {background-image: linear-gradient(to bottom, rgba(2,18,67,0.7), rgba(0,9,149,0.7)); border-color: #3ce6ff; color: white;}

    >.gridItemIcon {
        img {
            height: 100%;
            width: 100%;
        }
    }

}

#infoPopup.rank2::before, #infoPopup.rank2::after {
    content: "PUSI!!!!";
    background-image: linear-gradient(to bottom, black 20%, rgba(245,228,75,1))
}
#infoPopup.rank3::before, #infoPopup.rank3::after {background-image: linear-gradient(to bottom, black 20%, rgba(251,166,64,1))}
#infoPopup.rank4::before, #infoPopup.rank4::after {background-image: linear-gradient(to bottom, black 20%, rgba(242,106,106,1))}
#infoPopup.rank5::before, #infoPopup.rank5::after {background-image: linear-gradient(to bottom, black 20%, rgba(166,115,217,1))}
#infoPopup.rank6::before, #infoPopup.rank6::after {background-image: linear-gradient(to bottom, black, rgba(2,18,67,1) 30%, rgba(0,9,149,1))}

#infoPopup {

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

    #equipmentIconContainer {
        width: min(80px,100%);
        height: auto;
        z-index: 1;
        >#equipmentIcon {width: 100%}
    }

    .rankContainer {
        position: relative;
        font-family: var(--font-yuruka),sans-serif;
        font-size: 1.5em;

        z-index: 0;

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

        &:has(#rank.rank1)::before{content:"Rank 1"}
        &:has(#rank.rank2)::before{content:"Rank 2"}
        &:has(#rank.rank3)::before{content:"Rank 3"}
        &:has(#rank.rank4)::before{content:"Rank 4"}
        &:has(#rank.rank5)::before{content:"Rank 5"}
        &:has(#rank.rank6)::before{content:"Rank 6"; text-shadow: 2px 2px 0 #3d6483}

    }

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

        &.rank1 {background-image: linear-gradient(white, white);}
        &.rank2 {background-image: linear-gradient(to bottom, #f5e44b, #fffbb7)}
        &.rank3 {background-image: linear-gradient(to bottom, #fba640, #ffe1ae)}
        &.rank4 {background-image: linear-gradient(to bottom, #f26a6a, #fecbcb)}
        &.rank5 {background-image: linear-gradient(to bottom, #a673d9, #e1d0f2)}
        &.rank6 {background-image: linear-gradient(to bottom, #021243, #000995); -webkit-text-stroke-color: #3ce6ff}

    }

    #infoPopupDescription {
        font-family: var(--font-marugo), sans-serif;
        text-align: center;
    }

    #stats {
        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}
        }

        .statData {
            position: relative;
            font-family: var(--font-yuruka), sans-serif;
            display: grid;
            grid-template-columns: 1fr 1fr;
            line-height: 1.3;
            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;}
        }
    }

    #skillDescription {
        font-family: var(--font-marugo), sans-serif;
        grid-column: span 2;
        text-wrap: wrap;
    }

    #craftingDataContainer {

        &:has(section.noContent ~ section.noContent ~ section.noContent) {display: none;}

        h1, h2 {font-family: var(--font-yuruka), sans-serif; margin-block: 0; text-align: center;}
        h1 {
            line-height: 2;
            > .signitonIconContainer {
                border-radius: 100%;
                height: 1.5em;
                width: 1.5em;
                aspect-ratio: 1;
                display: inline-block;
                vertical-align: text-bottom;
                overflow: hidden;
                border: 2px solid rgb(117,87,43);
                >img {
                    height: 115%;
                    margin-top: -7.5%;
                    margin-left: -7.5%;
                }
            }
        }

        min-width: 70%;

        section {
            display: flex;
            flex-direction: column;
            gap: 1em;
            h2 {margin-block: 0;}
            &.noContent {display: none};
        }

        hr:has(+section.noContent) {display: none;}

        hr {
            background-color: rgb(117,87,43);
            height: 2px;
            border: none;
            border-radius: 2px;
            width: 100%;
        }
    }

    .materialData {
        --mat-height: 4em;

        display: grid;
        grid-auto-rows: var(--mat-height);
        row-gap: 10px;
        column-gap: 20px;
        min-width: 100%;

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

            .hexagonImageContainer {
                display: flex;
                align-items: center;
                justify-content: center;

                position: absolute;
                top: 0;
                left: 0;

                height: 100%;
                aspect-ratio: 1;

                z-index: 1;

                .iconContainer {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 80%;

                    z-index: 2;

                    img {height: 100%;}
                }

                .hexagonBackground {
                    height: 100%;
                    width: 100%;
                    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;
                    z-index: 1;

                    background-color: rgb(193,144,71);
                }

                .hexagonBorder {
                    height: calc(100% + 0.5em);
                    width: calc(100% + 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;

                    background-color: rgb(117,87,43);
                }
            }

            .materialNameContainer {
                max-width: 100%;
                text-overflow: ellipsis;
                font-family: var(--font-marugo), sans-serif;
                align-self: flex-end;
                margin-left: calc(var(--mat-height) / 2);
                margin-bottom: 1%;
                min-width: calc(100% - var(--mat-height)/2);
                height: 65%;
                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: rgb(230,209,171);

                .materialName {
                    margin-left: calc(var(--mat-height) / 2 + 10px);;
                    margin-right: 1em;
                    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;

                    p {width: 100%}

                    .materialQuantity {
                        float: right;
                        font-family: var(--font-yuruka), sans-serif;
                        margin-inline-start: 0.5em;
                    }
                }
            }
        }
    }

    .baseItem, .upgrade {
        font-family: var(--font-marugo), sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;

        a {
            color: inherit;
            text-decoration: none;
            &:active, &:focus, &:hover {
                text-decoration: underline;
            }
        };

        .iconContainer {
            display: inline-block;
            height: 4em;
            width: 4em;
            img {height: 100%;}
            vertical-align: middle;
            margin-inline-start: 1em;
        }
    }

    .oniOrbs {
        margin-block: 0;
        font-family: var(--font-yuruka), sans-serif;
        text-align: center;
        &::before {
            content: "";
            display: inline-block;
            height: 1.5em;
            width: 1.5em;
            background-image: url("/images/other_assets/oniOrbIcon.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            margin-inline-end: 0.5em;

            vertical-align: text-bottom;
        }
    }

    #upgrades {
        display: flex;
        flex-direction: column;
        gap: 1em;
        h1 {font-family: var(--font-yuruka), sans-serif; margin-block: 0; text-align: center;}
    }
}