:root {
    font-family: "Bungee";
    user-select: none;
    -webkit-user-select: none;

    --scale: 1.25;
    --small: calc(1rem * pow(var(--scale), -1));
    --half: calc(1rem * pow(var(--scale), -0.5));
    --1: calc(1rem * pow(var(--scale), 0));
    --2: calc(1rem * pow(var(--scale), 1));
    --3: calc(1rem * pow(var(--scale), 2));
    --4: calc(1rem * pow(var(--scale), 3));
    --5: calc(1rem * pow(var(--scale), 4));
    --6: calc(1rem * pow(var(--scale), 5));
    --7: calc(1rem * pow(var(--scale), 6));
    --8: calc(1rem * pow(var(--scale), 7));
    --9: calc(1rem * pow(var(--scale), 8));
    --10: calc(1rem * pow(var(--scale), 9));
    --11: calc(1rem * pow(var(--scale), 10));
    --12: calc(1rem * pow(var(--scale), 11));
    --14: calc(1rem * pow(var(--scale), 13));
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    width: 100vw;
    height: 100vh;
}

button {
    font-family: "Bungee";
}

header {
    font-size: 18pt;
    font-weight: bold;
    box-sizing: border-box;
    z-index: 80;

    display: flex;
    flex-direction: row;
    align-items: center;

    box-shadow: #0001 0 2px 20px;
    background-color: #eee;

    padding: var(--1);
    gap: var(--1);

    .grow {
        flex-grow: 1;
        display: flex;
        height: 100%;
        align-items: center;
    }
}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .map {
        flex-grow: 1;
        background-color: #211; /* TEMP: Until I set up and actual map */
    }

    &.lobby {
        .frame {
            flex-grow: 1;
            background-color: #aaa;
            position: relative;
            overflow-y: scroll;
            width: 100%;
        }

        .pfp-list {
            z-index: 4;
            overflow-x: auto;
            box-shadow: 0 0 10px #0004;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: var(--2);
            width: 100%;
            font-size: 20pt;
            height: 5vh;
            padding: var(--small) 0;

            small {
                font-size: 0.7em;
                font-style: italic;
                color: #383838ff;
            }

            .pfp {
                transition: transform 175ms linear;

                @starting-style {
                    transform: scale(0);
                }
            }
        }

        .team-button {
            display: flex;
            --deco: black;
            z-index: 3;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 5px var(--deco);
            background-color: var(--deco);
            font-size: 16pt;
            gap: var(--small);
            padding: var(--1) 0;
            border: none;

            &.hider {
                --deco: #67c;
            }

            &.seeker {
                --deco: #c67;
            }
        }
    }

    &.menu button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        border: none;
        margin: 0;
        /* box-shadow: 0 0 25px black; */
        width: 105%;

        &:first-child {
            font-size: 35pt;
            flex-grow: 1;
            justify-content: safe;
            flex-direction: column;
            background-color: #6c6;
            margin-top: calc(-1 * var(--4));
            transform: rotateZ(2deg) translateX(-7px) translateY(-30px);
        }

        &:nth-child(2) {
            font-size: 28pt;
            min-height: 32%;
            flex-direction: column;
            background-color: #67c;
            margin-top: calc(-1 * var(--8));
            padding-bottom: var(--5);
            transform: rotateZ(-2deg) translateX(-6px);
        }

        &:nth-child(3) {
            font-size: 25pt;
            min-height: 20%;
            margin-top: calc(-1 * var(--4));
            gap: 4px;
            background-color: #c67;
            transform: rotateZ(1deg) translateY(5px);
        }
    }
}

div.screen-cover {
    font-size: 24pt;
    position: fixed;
    inset: 0;
    background-color: #0009;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    flex-direction: column;
    backdrop-filter: blur(1px);
    gap: var(--2);

    strong {
        color: white;
        filter: drop-shadow(0 0 10px #000a);
    }

    .spinner {
        font-size: 48pt;
        view-transition-name: spinner;
        opacity: 0.85;
    }
}

.settings-popup {
    position: relative;
    font-family: "sans-serif";
    font-size: 18pt;
    background-color: white;
    display: flex;
    padding: var(--small) var(--1);
    flex-direction: column;
    width: 93vw;
    height: 95vh;
    border-radius: 10px;
    overflow: hidden;
    border: none;
    transition: 100ms ease-out;
    transition-property: transform, opacity;

    @starting-style {
        transform: translateY(10px);
        opacity: 0;
    }

    h2 {
        margin: 0;
        font-size: 22pt;
        font-family: "Bungee";
        border-bottom: solid 2px #aaa;
        display: flex;
        gap: 0.2em;
        align-items: center;
        justify-content: center;
    }

    h3 {
        font-size: 20pt;
        font-family: "Bungee";
        margin: 0;
        display: flex;
        gap: 0.2em;
        align-items: center;
    }

    fieldset {
        padding: var(--small) 0;
        border: none;
        border-bottom: solid 2px #ddd;
        display: flex;
        flex-direction: column;

        p {
            font-size: 16pt;
            margin: 0;
            margin-bottom: var(--2);
            text-wrap: balance;
            font-family: sans-serif;
        }
    }

    & > div:nth-child(2) {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        min-height: 0;
    }

    & > div:nth-child(3) {
        height: 7%;

        button {
            font-size: 20pt;
            box-shadow: 0 0 5px black;
            background-color: #6c7;
            border: none;
            border-radius: 5px;
            margin: 0;
            padding: 0 var(--1);
            width: 100%;
            height: 100%;
        }
    }

    select {
        padding: 0.5em 0;
    }

    input {
        width: 100%;
        box-shadow: 0 0 5px #0004 inset;

        &.extra {
            margin-top: 0em;
        }

        &[type="range"] {
            appearance: none;
            padding: 0.2em 0;
            border-radius: 5px;
            background-color: #999;
            height: var(--1);

            &::-webkit-slider-thumb {
                appearance: none;
                border-radius: 50%;
                color: red;
                background-color: white;
                box-shadow: 0 0 5px #000a;
                height: var(--4);
                width: var(--4);
            }
        }
    }

    label {
        display: grid;
        grid-template-areas: "l p" "i i";
        gap: var(--small);
        margin: var(--1) 0;
        width: 100%;

        :first-child {
            grid-area: l;
        }

        :nth-child(2) {
            grid-area: p;
            text-align: right;
        }

        :nth-child(3) {
            grid-area: i;
        }
    }
}

:root::view-transition-group(spinner) {
    animation-duration: 0s;
    animation-delay: 0s;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

span.spinner {
    width: 1em;
    height: 1em;
    filter: drop-shadow(0 0 10px #000a);
    border: solid 0.1em gray;
    border-bottom-color: white;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

span.pfp {
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    --deco-color: #0000;

    box-sizing: border-box;
    border-style: solid;
    border-width: 4px;
    border-color: var(--deco-color);

    img {
        width: 2em;
        height: 2em;
        border-radius: 50%;
    }

    svg {
        position: absolute;
        bottom: -10%;
        right: -15%;
        color: var(--deco-color);
        filter: drop-shadow(0 0 2px black);
        border-radius: 50%;
        padding: 1px;
        text-align: center;
    }

    &[data-initial]::after {
        content: attr(data-initial);
        color: white;
        filter: drop-shadow(0 0 4px black);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.seeker {
        --deco-color: #c67;
    }

    &.hider {
        --deco-color: #67c;
    }
}

button.fab {
    transition: 100ms linear;
    transition-property: color, background-color, box-shadow;
    background-color: #151515ff;
    color: #eee;
    border-radius: 100px;
    box-shadow: 0 0 6px #222;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    font-size: 12pt;
    padding: var(--2);
    position: absolute;

    &:disabled {
        background-color: #999;
        color: #555;
        box-shadow: 0 0 5px #4445 inset;
    }

    &.bl {
        left: 0.5em;
        bottom: var(--small);
    }

    &.br {
        right: 0.5em;
        bottom: var(--small);
    }

    &.tr {
        right: 0.5em;
        top: var(--small);
    }

    &.tl {
        left: 0.5em;
        top: var(--small);
    }
}