@import "../ui-variables.css";
@import "../fonts.css";
@import "../elements/dialog.css";
@import "../forms.css";


@import "/assets/css/animations.css";

dialog.title-screen{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in;
    /*container-type: inline-size;*/
    >form{
        display: block;
        width: 100%;
        height: 100%;
        background: none;
        background-size: 10%;
        color: #fff;
        font-family: "Kemco Pixel Bold";
        /*animation: scroll 20s linear infinite;*/
        >button[name=toggle-sound]{
            display: block;
            position: fixed;
            z-index: 3;
            top: 1em;
            left: 1em;
            width: 4em;
            height: 4em;
            background: url("../../svg/icon-sound.svg#enabled") no-repeat;
            border: none;
            &.disabled{
                background: url("../../svg/icon-sound.svg#disabled") no-repeat;
            }
        }
        >dialog.default-settings{
            overflow-y: auto;
            padding: 1.5em;
            background: #cecece;
            border-radius: 1em;
            box-shadow: .2em .2em rgba(51, 51, 51, 0.21);
            >header{
                margin: 0 0 1em;
                >span{
                    font-size: 1em;
                    text-shadow: .1em .1em #fff;
                }
            }
            >figure{
                display: block;
                box-sizing: border-box;
                float: left;
                width: 40%;
                height: auto;
                max-height: 30vh;
                aspect-ratio: 1/1;
                margin: 0 0 1em;
                padding: 0;
                background: url("../../svg/portrait-trump.svg") no-repeat;
                background-position: left bottom;
                background-size: 100% 100%;
                box-shadow: .15em .15em  rgba(66, 66, 66, 0.53);
                border: .4em solid #eeeeee;
                border-radius:1em;

                @media screen and (min-aspect-ratio: 12/12) and (max-aspect-ratio: 12/0) {
                    width: 25%;
                }
            }
            >blockquote{
                display: block;
                position: relative;
                box-sizing: border-box;
                float: left;
                width: 60%;
                padding: 1em 1em;
                margin: 0 0 1.5em;
                background: #fff;
                border-radius: 2em;
                box-shadow: .15em .15em  rgba(66, 66, 66, 0.53);

                @media screen and (min-aspect-ratio: 12/12) and (max-aspect-ratio: 12/0) {
                    width: 75%;
                }

                >span {
                    font-size: .75em;
                    font-family: "Press Start 2P";
                    overflow: hidden;
                }
                &:before{
                    display: block;
                    position: absolute;
                    left: -.9em;
                    top: 20%;
                    content: "";
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 15px 20px 15px 0;
                    border-color: transparent #fefefe transparent transparent;
                    display: block;
                    margin-right: 5px;

                }
            }
            >fieldset{
                display: block;
                box-sizing: border-box;
                float: right;
                width: 100%;
                margin: 0;
                padding: 1em;
                background: var(--form-component-background-color);
                border: .1em solid var(--form-component-accent-color);
                border-radius: .75em;
                box-shadow: .15em .15em  rgba(66, 66, 66, 0.53);

                &:first-of-type{
                    margin: 0 0 1em;
                }

                >label{
                    display: block;
                    box-sizing: border-box;
                    margin: 0 0 .75em;
                    overflow: auto;
                    >span{
                        display: block;
                        box-sizing: border-box;
                        float: left;
                        width: calc(100% - 2em);
                    }
                    >input[type=checkbox]{
                        float: right;
                    }
                }
                >button{
                    display: block;
                    clear: both;
                    box-sizing: border-box;
                    width: auto;
                    margin: 0 auto 1em;
                    font-size: .9em;
                    padding: 1em;
                    background: var(--enticement-background-color);
                    color: var(--enticement-text-color);
                    font-family: "Kemco Pixel Bold";
                    border: .1em solid #fff;
                    box-shadow: .1em .1em #333;
                    border-radius: .5em;
                }
            }
        }
        >canvas{
            display: block;
            position: fixed;
            z-index: 0;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            background: rgba(7, 106, 255, 0);

        }
        >object{
            display: block;
            box-sizing: border-box;
            position: fixed;
            z-index: 5;
            transition: all .25s ease-in;
            width: 100%;
            pointer-events: none;
            &.character{
                top: 50%;
                left: 5%;
            }
            &.start{
                top: 10%;
                left: 0%;
            }
            &.title{
                top: 20%;
                left: 0%;
            }
            @media screen and (min-aspect-ratio: 9/12) and (max-aspect-ratio: 12/12) {
                &.character{
                    /*top: 55%;*/
                }
                &.start{
                    width: 80%;
                    left: 10%;
                }
                &.title{
                    width: 80%;
                    left: 10%;
                }
            }
            @media screen and (min-aspect-ratio: 12/12) and (max-aspect-ratio: 12/10) {
                /*background: pink;*/
                &.character{
                    width: 50%;
                    top: 10%;
                }
                &.start{
                    width: 60%;
                    height: 20vh;
                    top: 25%;
                    left: 35%;
                }
                &.title{
                    width: 60%;
                    height: 60vh;
                    top: 28%;
                    left: 35%;
                }
            }
            @media screen and (min-aspect-ratio: 12/10) and (max-aspect-ratio: 12/7) {
                /*background: #7e0f23;*/
                &.character{
                    width: 50%;
                    top: 10%;
                }
                &.start{
                    width: 60%;
                    height: 20vh;
                    top: 20%;
                    left: 35%;
                }
                &.title{
                    width: 60%;
                    height: 60vh;
                    top: 30%;
                    left: 35%;
                }
            }
            @media screen and (min-aspect-ratio: 12/7) and (max-aspect-ratio: 12/5) {
                /*background: orange;*/
                &.character{
                    width: 50%;
                    top: 10%;
                    left: 2%;
                }
                &.start{
                    width: 50%;
                    height: 20vh;
                    top: 15%;
                    left: 45%;
                }
                &.title{
                    width: 50%;
                    height: 60vh;
                    top: 30%;
                    left: 45%;
                }
            }
            @media screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 12/4) {
                &.character{
                    width: 50%;
                    top: 10%;
                    left: 0;
                }
                &.start{
                    width: 42%;
                    top: 20%;
                    left: 45%;
                }
                &.title{
                    width: 42%;
                    top: 35%;
                    left: 45%;
                }
            }
            @media screen and (min-aspect-ratio: 12/4) and (max-aspect-ratio: 12/0) {
                &.character{
                    width: 50%;
                    top: 10%;
                    left: 0;
                }
                &.start{
                    width: 40%;
                    height: 25vh;
                    top: 13%;
                    left: 50%;
                }
                &.title{
                    width: 40%;
                    height: 60vh;
                    top: 33%;
                    left: 50%;
                }
            }
        }
        &:has(dialog.title-screen-menu[open]){
            >object.start{
                top: -50%;
            }
            >object.title{
                top: 5%;
                @media screen and (min-aspect-ratio: 12/12) and (max-aspect-ratio: 12/10) {
                    &{
                        top: 15%;
                        width: 60%;
                        height: 33vh;
                        left: 35%;
                        /*background: orange;*/
                    }
                }
                @media screen and (min-aspect-ratio: 12/10) and (max-aspect-ratio: 12/7) {
                    &{
                        /*background: blue;*/
                        top: 15%;
                        left: 35%;
                        height: 33vh;
                    }
                }
                @media screen and (min-aspect-ratio: 12/7) and (max-aspect-ratio: 12/6) {
                    &{
                        /*background: red;*/
                        width: 50%;
                        top: 0%;
                    }
                }
                @media screen and (min-aspect-ratio: 12/6) and (max-aspect-ratio: 12/5) {
                    &{
                        /*background: burlywood;*/
                        width: 50%;
                        top: 0%;
                    }
                }
                @media screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 12/4) {
                    &{
                        /*background: purple;*/
                        top: 5%;
                    }
                }
                @media screen and (min-aspect-ratio: 12/4) and (max-aspect-ratio: 12/0) {
                    &{
                        /*background: fuchsia;*/
                        top: 5%;
                        left: 50%;
                        height: 40vh;

                    }
                }
            }
        }
        >dialog.title-screen-menu[open]{
            display: block;
            box-sizing: border-box;
            position: fixed;
            z-index: 5;
            top: 30%;
            width: 80%;
            height: 5em;
            margin: 0 auto;
            animation: popIn .5s forwards;
            >menu{
                display: block;
                box-sizing: border-box;
                width: 100%;
                margin: 0;
                background: var(--form-background-color);
                padding: 1em;
                border-radius: 1em;
                list-style: none;
                box-shadow: .2em .2em rgba(51, 51, 51, 0.21);
                >li{
                    display: block;
                    width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    >button{
                        display: block;
                        width: 100%;
                        padding: 2.5vh 2.5em;
                        font-family: "Kemco Pixel Bold";
                        >span{
                            font-size: 4vh;
                        }
                    }
                    >dialog.accounts[open]{
                        display: block;
                        box-sizing: border-box;
                        animation: popIn .5s forwards;
                        background: var(--form-background-color);
                        padding: 1em;
                        border-radius: 1em;
                        list-style: none;
                        box-shadow: .2em .2em rgba(51, 51, 51, 0.21);
                        >header{
                            padding: 1em;
                            text-align: center;
                        }
                        >menu{
                            display: block;
                            box-sizing: border-box;
                            overflow-y: auto;
                            width: 100%;
                            max-height: 65vh;
                            margin: 0;
                            padding: 0;
                            >li{
                                display: block;
                                box-sizing: border-box;

                                >button{
                                    display: block;
                                    width: 100%;
                                    padding: 2.5vh 2.5em;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    font-family: "Kemco Pixel Bold";
                                }
                            }
                        }

                    }
                }
            }
            button[formmethod=dialog] {
                display: block;
                position: absolute;
                top: -.5em;
                right: -.75em;
                width: 3em;
                height: 3em;
                border-radius: 100%;
                background: url("../../svg/icon-close.svg") no-repeat center, var(--form-background-color);
                background-size: 50% 50%;
                border: .2em solid var(--form-component-accent-color);
            }
            @media screen and (min-aspect-ratio: 0/12) and (max-aspect-ratio: 6/12) {
                &{
                    /*top: 40%;*/
                    /*left: 30%;*/
                    /*width: 60%;*/
                    /*background: royalblue;*/
                }
            }
            @media screen and (min-aspect-ratio: 6/12) and (max-aspect-ratio: 9/12) {
                &{
                    top: 36%;
                    /*left: 30%;*/
                    /*width: 60%;*/
                    /*background: greenyellow;*/
                }
            }
            @media screen and (min-aspect-ratio: 9/12) and (max-aspect-ratio: 12/12) {
                &{
                    top: 36%;
                    /*left: 30%;*/
                    /*width: 60%;*/
                    /*background: cyan;*/
                }
            }
            @media screen and (min-aspect-ratio: 12/12) and (max-aspect-ratio: 12/10) {
                &{
                    top: 50%;
                    left: 30%;
                    width: 60%;
                    /*background: orange;*/
                }
            }
            @media screen and (min-aspect-ratio: 12/10) and (max-aspect-ratio: 12/7) {
                &{
                    /*background: blue;*/
                    width: 50%;
                    top: 50%;
                    left: 30%;
                }
            }
            @media screen and (min-aspect-ratio: 12/7) and (max-aspect-ratio: 12/6) {
                &{
                    /*background: red;*/
                    width: 40%;
                    top: 50%;
                    left: 40%;
                }
            }
            @media screen and (min-aspect-ratio: 12/6) and (max-aspect-ratio: 12/5) {
                &{
                    /*background: burlywood;*/
                    width: 40%;
                    height: 20vh;
                    top: 57%;
                    left: 40%;
                }
            }
            @media screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 12/4) {
                &{
                    /*background: purple;*/
                    width: 40%;
                    height: 20vh;
                    top: 55%;
                    left: 32.5%;
                }
            }
            @media screen and (min-aspect-ratio: 12/4) and (max-aspect-ratio: 12/0) {
                &{
                    /*background: fuchsia;*/
                    width: 40%;
                    top: 50%;
                    left: 40%;
                }
            }
        }
        dialog.default-settings[open]~object,
        dialog.default-settings[open]~menu{
            /*display: none;*/
            /*transform: scale(0);*/
        }
        >dialog.default-settings:not([open])~menu{
            /*transform: scale(1);*/
        }

    }

    >dialog.new-account{
        box-sizing: border-box;
        position: fixed;
        top: 5%;
        left: 5%;
        width: 90vw;
        max-width: 100%;
        height: 90vh;
        max-height: 100%;
        margin: 0;
        padding: 0;
        z-index: 5;
        animation: popIn .5s forwards;
        &::backdrop{
            background: rgba(51, 51, 51, 0.69);
        }
        >form{
            box-sizing: border-box;
            overflow: auto;
            padding: 1em;
            margin: 0;
            >fieldset{
                display: block;
                box-sizing: border-box;
                /*width: 100%;*/
                height: 100%;
                margin: 0;
                padding: 1em 1em 1.5em;
                background: #fff;
                text-align: center;
                border-radius: 1em;
                >legend{
                    box-sizing: border-box;
                    background: #fff;
                    margin: 0 auto;
                    padding: 1em;
                    border: .1em solid #333;
                    box-shadow: .1em .1em #333;
                    text-align: center;
                    font-size: 5vw;
                    @media screen and (min-aspect-ratio: 8/12) and (max-aspect-ratio: 12/0){
                        &{
                            font-size: 1.5em;
                        }
                    }
                }
                &:nth-of-type(1)>legend{
                    background: #1796ff;
                    color: #fff;
                    text-shadow: .1em .1em #082970;
                }
                &:nth-of-type(3)>legend{
                    background: #9657ff;
                    color: #fff;
                    text-shadow: .1em .1em #3e0870;
                }
                &:nth-of-type(2)>legend{
                    background: var(--enticement-background-color);
                    color: #fff;
                    text-shadow: .1em .1em green;
                }
                >p{
                    text-align: left;
                    margin: 0 0 1em;
                    font-size: .9em;
                    line-height: 1.75em;
                    font-family: "Press Start 2P";
                }
                aside{
                    display: block;
                    box-sizing: border-box;
                    margin: 0 0 1em;
                    padding: 1em 1em;
                    background: #fdb752;
                    border: .15em solid #ff980f;
                    box-shadow: .1em .1em #333;

                    font-family: "Press Start 2P";
                    color: #ffffff;
                    text-shadow: .075em .075em #d56f09;
                    >p{
                        margin: 0 0 1em;
                        text-align: left;
                        &:first-of-type{
                            background: #ffa041;
                            padding: .75em;
                            border: .15em solid darkorange;
                            &:before{
                                content: "";
                                display: inline-block;
                                float: left;
                                width: 3em;
                                height: 3em;
                                background: url("../../svg/ui-info.svg") no-repeat;
                                vertical-align: top;
                            }
                        }
                        >b{
                            color: #ff5900;
                            text-shadow: .1em .1em #ff9c7b;
                            text-decoration: .2em underline darkorange;
                            text-decoration-style: dotted;
                        }

                    }
                    >button{
                        >span:before{
                            content: "";
                            display: inline-block;
                            box-sizing: border-box;
                            width: 2em;
                            height: 2em;
                            margIn: 0 .5em 0;
                            background: url("../../svg/ui-download.svg") no-repeat;
                            vertical-align: middle;
                        }
                    }
                }
                button{
                    background: var(--enticement-background-color);
                    color: #fff;
                    font-family: "Kemco Pixel Bold";
                    font-size: 1em;
                    border-radius: .75em;
                    border: none;
                    margin: 0 auto 1em;
                    padding: 1em;
                    >span{
                        font-size: 1em;
                    }
                    &:focus{
                        outline: .15em solid #2eff2e;

                    }
                }
                >progress{
                    display: block;
                    width: 60%;
                    margin: 2em auto;
                }
            }
            >input[value=""]~fieldset:nth-of-type(1){
                display: block;
            }
            >input[value=""]~fieldset:nth-of-type(n+2){
                display: none;
            }
            >input[value=loading]~fieldset{
                display: none;
            }
            >input[value=loading]~fieldset:nth-of-type(3){
                display: block;
            }
            >input[value=complete]~fieldset{
                display: none;
            }
            >input[value=complete]~fieldset:nth-of-type(2){
                display: block;
            }
        }
    }
}

button.confirm{
    background: var(--enticement-background-color);
    color: var(--enticement-text-color);
    font-family: "Kemco Pixel Bold";
    border: .1em solid #fff;
    box-shadow: .1em .1em #333;
    border-radius: .5em;
}

/*.loader {*/
/*    position: relative;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 100%;*/
/*    max-width: 6rem;*/
/*    margin-top: 3rem;*/
/*    margin-bottom: 3rem;*/
/*}*/
/*.loader:before,*/
/*.loader:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    animation: pulsOut 1.8s ease-in-out infinite;*/
/*    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));*/
/*}*/
/*.loader:before {*/
/*    width: 100%;*/
/*    padding-bottom: 100%;*/
/*    box-shadow: inset 0 0 0 1rem #fff;*/
/*    animation-name: pulsIn;*/
/*}*/
/*.loader:after {*/
/*    width: calc(100% - 2rem);*/
/*    padding-bottom: calc(100% - 2rem);*/
/*    box-shadow: 0 0 0 0 #fff;*/
/*}*/

@keyframes pulsIn {
    0% {
        box-shadow: inset 0 0 0 1rem #fff;
        opacity: 1;
    }
    50%, 100% {
        box-shadow: inset 0 0 0 0 #fff;
        opacity: 0;
    }
}

@keyframes pulsOut {
    0%, 50% {
        box-shadow: 0 0 0 0 #fff;
        opacity: 0;
    }
    100% {
        box-shadow: 0 0 0 1rem #fff;
        opacity: 1;
    }
}