* {
    box-sizing: border-box;
}

#playerDATA {
    background-color: var(--subbgcolor);
    padding: 1dvw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1vw;

    #hero {
        width: 25dvh;
        height: 25dvh;
        border: solid 3px var(--backredcolor);
        border-radius: 100dvh;
        object-fit: cover;
    }

    ul {
        padding-left: 1vw;
        width: 80%;

        li {
            display: flex;
            align-items: center;
            padding: 1dvh;
            font-size: 1.5em;
            border-bottom: dotted 2px var(--lines);
            flex-wrap: wrap;

            p {
                margin-left: 1dvh;
            }

            a {
                padding: 0.5dvh;
                margin: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--btncolor);
                border-radius: 1dvh;
                cursor: pointer;
                transition: 0.3s;
            }

            a:hover {
                background: var(--lines);
            }
        }
    }
}

#box_1 {
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 0.5dvh var(--backredcolor);

    h1 {
        min-height: 4dvh;
        width: 100%;
        background: var(--btncolor);
        font-family: "Share Tech Mono", monospace;
        padding-left: 1dvh;
    }
}

#status,
#dados,
#inv,
#powers {
    min-height: 40dvh;
    max-height: 40dvh;
    overflow: hidden;
    background-color: var(--subbgcolor);
}

#powers {
    ul {
        li {
            position: relative;
            #DelBTN {
                top: 0;
                right: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: red;
                position: absolute;
                width: 4dvh;
                height: 100%;
                transition: 0.3s;
                &:hover {
                    background-color: darkred;
                }
            }
        }
    }
}

#status {
    width: 25%;
    border-right: solid 1px var(--lines);

    ul {
        padding: 3vw 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        li {
            margin: 2dvh;
            background-color: var(--bgcolor);
            border-radius: 1dvw;

            label {
                a {
                    display: flex;
                    align-content: center;
                    align-items: center;
                }

                padding-left: 1dvh;
                display: flex;
                align-items: center;
                justify-content: center;

                p {
                    margin: 0 0.2dvh;
                }

                span {
                    padding: 1dvh;
                    background: var(--btncolor);
                    font-size: 1em;
                    cursor: pointer;
                    transition: 0.3s;
                }

                span:hover {
                    background-color: var(--lines);
                }

                .btn-left {
                    border-top-left-radius: 2dvh;
                    border-bottom-left-radius: 2dvh;
                    border-right: solid var(--lines) 1px;
                }

                .btn-right {
                    border-top-right-radius: 2dvh;
                    border-bottom-right-radius: 2dvh;
                    border-left: solid var(--lines) 1px;
                }
            }
        }
    }
}

#dados {
    width: 30%;
    display: flex;
    flex-direction: column;
    border-right: solid 1px var(--lines);

    #list {
        width: 100%;
        min-height: 20dvh;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border-bottom: dotted 2px var(--lines);

        li {
            transition: 0.3s;
            border-radius: 1vh;
            margin: 1vh;
            background: var(--btncolor);
            width: 45%;
            cursor: pointer;

            a {
                padding: 1vh;
                display: flex;
                font-size: 1.5em;
                align-items: center;

                span {
                    margin-right: 1vw;
                }
            }

            &:hover {
                background-color: var(--lines);
            }
        }
    }

    #log {
        flex-grow: 1;
        overflow-y: auto;

        li {
            cursor: pointer;
            font-size: 1.5em;
            padding: 0.5vh 2vh;

            &:hover {
                background-color: var(--lines);
            }
        }
    }
}

#inv {
    width: 30%;
    position: relative;
    border-right: solid 1px var(--lines);

    ul {
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-height: 80%;

        li {
            width: calc(100% / 4 - 2px);
            height: calc(100dvh / 9 - 2px);
            border: solid 1px var(--lines);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            cursor: pointer;

            a {
                position: absolute;
                right: 1dvh;
                top: 1dvh;
                background-color: var(--backredcolor);
                cursor: pointer;
                transition: 0.3s;

                span {
                    overflow: hidden;
                }
            }

            &:hover {
                background-color: var(--subbgcolor);
            }

            a:hover {
                background-color: var(--backdarkredcolor);
            }
        }

        li:hover {
            background-color: var(--lines);
        }
    }

    hgroup {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5dvh;
        width: 100%;
        bottom: 0;
        background-color: var(--subbgcolor);

        select,
        input,
        #btn {
            background-color: var(--btncolor);
            padding: 5px;
            border: none;
            margin: 0 0.5dvh;
        }

        input[type="text"] {
            width: 20%;
        }

        #btn {
            transition: 0.3s;
            border-radius: 1dvh;

            &:hover {
                background-color: var(--lines);
            }
        }

        input {
            color: var(--fontcolor);
        }

        input[type="number"] {
            width: 5dvw;
        }

        label {
            display: flex;
            align-items: center;

            a {
                border-radius: 1dvh 0 1dvh 0;

                span {
                    overflow: hidden;
                    font-size: 1em;
                }
            }
        }
    }
}

#powers {
    width: calc(100% - (30% + 25% + 30%));

    ul {
        height: 50%;
        border-bottom: dotted 2px var(--lines);
        overflow-y: scroll;

        li {
            padding: 1dvh;
            border-top: dotted 2px var(--lines);
            cursor: pointer;
            transition: 0.3s;

            a {
                font-size: 1.5em;
            }

            &:hover {
                background-color: var(--btncolor);
            }
        }
    }
    hgroup {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        input {
            margin-top: 1dvh;
            width: 90%;
            border: none;
            border-radius: 5px;
            padding: 2px;
            text-align: center;
            background-color: var(--btncolor);
            font-size: 1.2em;
        }
        textarea {
            width: 90%;
            height: 4dvw;
            resize: none;
            border: none;
            border-radius: 5px;
            padding: 2px;
            background-color: var(--btncolor);
            font-size: 1.2em;
            margin-top: 0.5dvh;
        }
        input[type="submit"] {
            margin-top: 0.5dvh;
            background-color: var(--btncolor);
            width: 90%;
            font-size: 1.2em;
            padding: 3px;
            text-align: center;
            transition: 0.3s;
            &:hover {
                background-color: var(--lines);
            }
        }
    }
}

#FloatInput {
    position: absolute;
    width: 10%;
    z-index: 100;

    input[type="text"] {
        width: 100%;
        border: solid 1px var(--backredcolor);
        border-radius: 10dvh;
        background-color: var(--btncolor);
        padding: 0.5dvh;
        text-align: center;
        font-size: 1.2em;
    }
}

#box_2 {
    h1 {
        min-height: 4dvh;
        width: 100%;
        background: var(--btncolor);
        font-family: "Share Tech Mono", monospace;
        display: flex;
        padding: 0 0 0 1vw;
        align-items: center;
    }
    #text_lore {
        ul {
            position: relative;
            width: 100%;
            min-height: 20dvw;
            display: flex;
            align-items: center;
            flex-direction: column;
            a {
                position: absolute;
                top: 1dvh;
                right: 1dvh;
                width: 4dvh;
                height: 4dvh;
                background-color: var(--btncolor);
                border-radius: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            p {
                font-family: arial;
                font-size: 1.5em;
                padding: 1vw;
                white-space: pre-wrap;
                width: 100%;
                min-height: 45dvw;
            }
            textarea {
                width: 100%;
                min-height: 45dvw;
                resize: none;
                border: none;
                background-color: transparent;
                font-family: arial;
                font-size: 1.5em;
                padding: 1vw;
                white-space: pre-wrap;
                color: #ffffff;
            }
            .lore_edit {
                border: none;
                margin: 1dvw 0 1dvw 0;
                padding: 0.5dvh;
                width: 99%;
                background-color: var(--btncolor);
                font-family: Arial, Helvetica, sans-serif;
                font-size: 2em;
                border-radius: 1dvw;
                cursor: pointer;
                transition: 0.3s;
            }
            .lore_edit:hover {
                background-color: var(--lines);
            }
        }
    }
}

#statusPlayer {
    text-align: center;
    width: 10%;
    position: fixed;
    z-index: 1000;
    top: 3dvh;
    right: 3dvh;
    padding: 0.5dvw;
    border-radius: 10vw;
    background-color: red;
}

@media only screen and (max-width: 1080px) {
    #playerDATA {
        flex-direction: column;
        align-items: center;

        #hero {
            width: 40vw;
            height: auto;
            aspect-ratio: 1 / 1;
        }

        ul li {
            font-size: clamp(1em, 2vw, 1.2em);
        }
    }

    #box_1 {
        flex-direction: column;

        #dados,
        #status,
        #inv,
        #powers {
            width: 100%;
            min-height: 60vh;
        }

        #powers ul {
            height: 30vh;
        }

        #powers hgroup textarea {
            height: 12vh;
        }

        #status ul {
            justify-content: center;
            align-items: center;
        }

        #dados #list {
            height: 30vh;
        }

        #inv {
            hgroup {
                input[type="text"] {
                    width: 25%;
                }
                input[type="number"] {
                    width: 10%;
                }
            }
            ul {
                max-height: 40vh;
                li {
                    width: 23%;
                    height: 20vh;
                }
            }
        }
    }

    #FloatInput {
        width: 60%;
        left: 20%;
        transform: translateY(30px);
    }

    #box_2 #text_lore {
        textarea {
            height: 40vh;
        }
    }

    #statusPlayer {
        width: 35%;
        padding: 2dvw;
    }
}

@media screen and (max-width: 1080px) and (orientation: landscape) {
    #box_1 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #dados,
    #status,
    #inv,
    #powers {
        width: 48%;
        min-height: 50vh;
        max-height: none;
    }

    #powers {
        width: 100%;
        margin-top: 2vh;

        ul {
            height: 25vh;
        }

        hgroup textarea {
            height: 15vh;
        }
    }

    #playerDATA #hero {
        width: 40vh;
        height: 40vh;
    }

    #FloatInput {
        width: 30%;
        transform: translateX(-20%) translateY(10px);
    }

    #inv ul li {
        width: calc(100% / 6 - 4px);
        height: 15vh;
    }

    #box_2 #text_lore textarea {
        height: 30vh;
    }

    #statusPlayer {
        width: 25%;
        padding: 1dvw;
    }
}