@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

:root {
    --pink: #ff66ff;
    --affordable: var(--pink);
    --unaffordable: #ff0000;
    --purple: rgb(172 0 255);
}

html,
head,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: "Google Sans", sans-serif;
    color: var(--pink);
    user-select: none;
    scrollbar-color: var(--purple) rgba(0, 0, 0, 0.5);
}

body {
    min-height: 100vh;
    background: radial-gradient(circle, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

.page-background {
    min-height: 100vh;
    background: url('hex-grid.png');
}

.hidden {
    opacity: 0;
    transition: opacity 2s;
}

#logo {
    width: 100%;
    max-width: 300px;
    margin: 0px auto;
    display: block;
    opacity: 0;
    transition: transform 0.5s, opacity 2s;
}

#logo.loaded {
    cursor: pointer;
}

.subtitle {
    max-width: 400px;
    margin: auto;
    transition: 2s;
    text-align: center;
    font-size: 200%;
}

.subtitle span {
    display: inline-block;
    margin: 8px;
    position: relative;
    transform: scale(200%);
    opacity: 0;
    transition: transform 2s, opacity 1s;
}

#subtitle2 span,
#subtitle3 span {
    color: white;
    font-size: 110%;
    margin: 2px;
    font-weight: bold;
}

#logo.loaded:hover {
    transform: scale(105%);

}

#splash-screen-container {
    height: 100dvh;
    display: flex;
    align-items: center;
    transition: all 1s ease-in;

    #access {
        display: block;
        margin: auto;
        background: var(--purple);
        color: white;
        font-size: 300%;
        font-family: "Rubik Mono One", monospace;
        padding: 10px 20px;
        border: none;
        margin-top: 40px;
        transition: all 200ms;
        border-radius: 3px;

        &:hover {
            transform: scale(105%);
        }
    }
}

.splash-screen-away {
    transform: translateY(-100dvh) scale(0.6);
}

#game-container {
    height: 100%;
    max-height: 100vh;
    display: grid;
    grid-template-columns: auto 400px;
    opacity: 0;
    transition: opacity 2s;
}

#main-frame {
    position: relative;
    min-height: 100vh;
    max-height: 100vh;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    overflow: hidden;
}

.drone-container {
    max-width: min(80%, 400px);
    transition: transform 0.05s;
    margin: auto;
    display: block;
    cursor: pointer;
}

.drone-container.clicked {
    transform: scale(110%);
}

.click-particle {
    position: absolute;
    transition: all 2s ease-in;
    width: 200px;
    font-size: 300%;
    font-weight: bold;
    color: white;
    text-align: center;
    pointer-events: none;
}

.click-particle-transition {
    transform: translateY(-300px);
    opacity: 0;
}

.click-score-particle {
    position: absolute;
    transition: all 2s ease-in;
    padding: 5px 10px;
    border-radius: 10px;
    background: white;
    font-size: 150%;
    font-weight: bold;
    color: var(--pink);
    text-align: center;
    transform: translateY(80px);
    pointer-events: none;
}

.click-score-particle-transition {
    transform: translateY(+300px);
    opacity: 0;
}

#sidebar {
    padding: 0px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-left: 1px solid white;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: auto;
    min-height: 0;
    max-height: 100vh;
}

.tool {
    color: white;
    border-radius: 10px;
    margin: 10px;
    position: relative;
    cursor: pointer;

    .tool-background {
        background: white;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: skew(20deg, -2deg);
        transition: transform 0.1s, background 0.5s;
    }

    &.locked .tool-background {
        background: #666666;
    }

    &:not(&.locked):hover {
        .tool-background {
            transform: skew(20deg, -3deg);
        }
    }

    .tool-inner {
        position: relative;
        padding: 10px;
        color: black;

        .title {
            font-family: "Rubik Mono One", monospace;
            font-size: 130%;
        }

        .quantity-owned {
            font-family: "Rubik Mono One", monospace;
            font-size: 250%;
        }
    }
}

.score {
    color: black;
    position: relative;
    max-width: 750px;
    margin: 30px auto;
    margin-bottom: 30px;

    .score-background {
        background: white;
        transform: skew(20deg, -2deg);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        box-shadow: var(--purple) 10px 10px 0px;
    }

    .score-inner {
        position: relative;
        text-align: center;
        font-family: "Rubik Mono One", monospace;
        padding: 10px;
    }

    .score-text {
        font-size: 200%;
    }
}

#stats-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.upgrades-title {
    color: black;
    position: relative;
    font-size: 200%;
    text-align: center;
    margin: 20px 5px 10px 5px;
    font-family: "Rubik Mono One", monospace;

    .upgrades-title-background {
        background-color: white;
        box-shadow: yellow 10px 10px 0px;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .upgrades-title-inner {
        position: relative;
    }
}

#upgrades {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .upgrade {
        margin: 5px 10px;

        .upgrade-inner {
            transition: transform 0.25s;
            cursor: pointer;
            background: black;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #666;

            &:hover {
                transform: scale(115%);
            }

            .upgrade-logo {
                width: 50px;
                height: 50px;
                border-radius: 5px;
                padding: 4px;
                display: block;
                background-size: contain;
                background-color: yellow;
                background-blend-mode: multiply;
                opacity: 1;
                mask-image: url(question-mark.svg);
                mask-size: 100%;
            }
        }

        .upgrade-popup {
            display: none;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            background: black;
            color: white;
            border: 1px solid white;
            border-radius: 10px;
            padding: 10px;
            transition: opacity 0.2s;
            z-index: 2;

            .title-background {
                transform: skew(20deg, -2deg);
                position: absolute;
                top: 0;
                left: 0;
                background-color: white;
                box-shadow: yellow 10px 10px 0px;
                width: 100%;
                height: 100%;
            }

            .title {
                padding: 5px;
                color: black;
                font-size: 130%;
                position: relative;
                font-family: "Rubik Mono One", monospace;
                margin-bottom: 20px;
            }

            .upgrade-description {
                font-style: italic;
                color: #666;
                text-align: right;
                margin-top: 10px;
                font-family: serif;

                &::before {
                    content: "\"";
                }

                &::after {
                    content: "\"";
                }
            }

            .upgrade-logo {
                width: 150px;
            }

            .upgrade-price-container {
                display: flex;
                align-items: center;
                margin: 20px 0px;

                img {
                    display: block;
                    width: 40px;
                    margin-right: 20px;
                }

                div {
                    font-size: 200%;
                    color: var(--unaffordable);
                }
            }

            .upgrade-purchased {
                display: none;
                font-size: 120%;
            }
        }

    }

    .upgrade.locked {
        .upgrade-inner {
            background-color: #666;
            border: 1px solid #666;
        }

        .upgrade-logo {
            background-color: #555;
        }

        .upgrade-inner:hover {
            transform: scale(100%);
        }
    }

    .upgrade.affordable {
        .upgrade-popup {
            .upgrade-price-container {
                div {
                    color: var(--affordable);
                }
            }
        }
    }

    .upgrade.purchased {
        .upgrade-inner {
            background-color: blue;
        }

        .upgrade-popup {
            .upgrade-price-container {
                display: none;
            }

            .upgrade-purchased {
                display: block;
            }
        }
    }
}

.dialog-button {
    background: white;
    color: black;
    border: 3px solid var(--purple);
    border-radius: 3px;
    transition: background 0.2s;

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

#statistics-container {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    max-width: 700px;
    transition: transform 1s;
    transform: translateY(-500px);
    z-index: 1;

    &.visible {
        transform: translateY(50px);
    }

    .inner {
        position: relative;
        padding: 30px;

        .background {
            transform: skew(5deg, 2deg);
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            box-shadow: var(--purple) 10px 10px 0px;
            width: 100%;
            height: 100%;
            border: 3px solid white;
        }

        .close {
            position: absolute;
            top: 20px;
            right: 10px;
        }

        .content {
            position: relative;

            .title {
                font-family: "Rubik Mono One", monospace;
                font-size: 150%;
                color: black;
                background: white;
                box-shadow: var(--purple) 10px 10px 0px;
                margin: 0px 20px 20px 20px;
                padding: 5px 20px;
            }

            table {
                border: 1px solid white;
                border-radius: 5px;
                margin: 20px auto;
                margin-bottom: 20px;

                th {
                    text-align: right;
                    border-right: 1px solid white;
                    padding: 5px;
                }

                td {
                    padding: 5px;
                }
            }

            #statistics-achievements span {
                display: inline-block;
                padding: 2px 4px;
                background: #333;
                border-radius: 4px;
                margin: 4px;
                white-space: nowrap;
                font-size: small;
                transition: all 0.2s;

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

.tool-stats {
    color: white;
    position: absolute;
    display: none;
    z-index: 2;

    .tool-stats-inner {
        padding: 20px 30px;
        position: relative;

        .background {
            transform: skew(5deg, 2deg);
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            box-shadow: var(--purple) 10px 10px 0px;
            width: 100%;
            height: 100%;
            border: 3px solid white;
        }

        .content {
            position: relative;
        }
    }


    .title {
        font-size: 150%;
        color: black;
        background: white;
        box-shadow: var(--purple) 10px 10px 0px;
        margin: 0px 20px 20px 20px;
        padding: 5px 20px;
        font-family: "Rubik Mono One", monospace;
    }

    p {
        font-family: "Google Sans", sans-serif;
        margin: 5px 0px;
    }
}

.author {
    text-align: center;
    border-radius: 10px;
    display: block;
    color: white;
    text-decoration: none;
    letter-spacing: 30%;
    text-shadow: black 2px 2px 4px;
    margin-bottom: 10px;

    &:hover {
        background: linear-gradient(43deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
        text-decoration: underline;
    }

    img {
        max-width: 80px;
        vertical-align: middle;
        filter: drop-shadow(black 2px 2px 4px);
        display: inline-block;
        margin-right: 10px;
    }

}

.drone-container {
    position: relative;

    .visor {
        mask-image: url('visor.png');
        background: black;
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: contain;
        mask-size: contain;

        img {
            opacity: 0;
            width: 100%;
            transition: opacity 1s;
        }

        img.visible {
            opacity: 1;
            animation:
                rotate 2s ease-in,
                rotate 1s linear 2s infinite;
        }
    }

    img {
        width: 100%;
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

#achievements-container {
    position: relative;
    min-height: 0;
    z-index: 1;

    #achievements {
        max-width: 600px;
        margin: auto;
        overflow: auto;
        max-height: 100%;

        .achievement {
            background: black;
            border: 3px solid white;
            max-width: 400px;
            color: white;
            position: relative;
            padding: 20px;
            margin: 20px auto;
            box-shadow: yellow 10px 10px 0px;
            transition:
                opacity 0.25s,
                transform .5s cubic-bezier(0.246, 1.347, 0.741, 0.963);
            transform: scale(0, 0);
            opacity: 0;

            &.visible {
                transform: scale(100%, 100%);
                opacity: 1;
            }

            .title {
                font-family: "Rubik Mono One", monospace;
                font-size: 130%;
                margin-bottom: 10px;
            }

            .close {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
    }
}

.hypno-gas-particle {
    display: block;
    position: absolute;
    pointer-events: none;
}

#reset-game {
    position: absolute;
    right: -5px;
    bottom: -10px;
    color: red;
    padding: 5px 10px;
    background-color: black;
    transition: all 0.6s;

    &:hover {
        color: white;
        background-color: red;
        animation: horizontal-shaking 200ms linear infinite;
    }
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(3px)
    }

    50% {
        transform: translateX(-3px)
    }

    75% {
        transform: translateX(3px)
    }

    100% {
        transform: translateX(0)
    }
}

.price-container {
    display: flex;
    border-radius: 4px;
    color: var(--unaffordable);
    max-width: fit-content;
    align-items: center;
    padding: 2px 4px;
    font-weight: bold;
    transition: all 500ms;

    &.affordable:hover img {
        transform: scale(1.1, 1.1);
    }

    * {
        display: block;
    }

    img {
        flex: none;
        width: 20px;
        margin-right: 5px;
    }
}

.affordable .price-container {
    color: var(--affordable);
}

.locked .price-container {
    opacity: 0;
}

#visor-game-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 88%;
    font-size: 200%;
    align-content: center;
    text-align: center;
    animation: throb 500ms infinite alternate;
    color: white;
    font-family: "Rubik Mono One", monospace;
    opacity: 0;
    transition: all 1s;
    background: black;
}

#visor-game-over.visible {
    opacity: 1;
}

@keyframes throb {
    from {
        transform: scale(100%);
    }

    to {
        transform: scale(95%);
    }
}

#cookie-popup {
    background: black;
    border: 3px solid var(--purple);
    margin: 10px;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    z-index: 2;
    transition: all 1s;
    display: none;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.95);
    }

    button {
        background: white;
        color: black;
        padding: 4px 10px;
        border: none;
        transition: all 0.2s;
    }

    button:hover {
        background-color: var(--purple);
        color: white;
    }

    a {
        color: white;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    img {
        width: 40px;
        vertical-align: middle;
    }
}

#bonus {
    position: absolute;
    z-index: 4;
    display: block;
    /* background-color: black; */
    border-radius: 40px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s, filter 0.2s;
    /* transform: scale(0%); */
    /* box-shadow: var(--pink) 0 0 20px; */
    filter: drop-shadow(var(--pink) 0 0 20px);
    animation: pulse 2s ease infinite;

    &.visible {
        opacity: 1;
        /* transform: scale(100%); */
    }

    &:hover {
        filter: drop-shadow(white 0 0 20px);
    }

    img {
        display: block;
        width: 120px;
    }
}

@keyframes pulse {

    0% {
        transform: scale(100%);
    }

    25% {
        transform: scale(110%);
    }

    50% {
        transform: scale(100%);
    }
}

#bonus-container {
    background-color: black;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    border: 1px solid white;
    width: 400px;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;

    &.visible {
        opacity: 1;
    }

    #bonus-name {
        font-family: "Rubik Mono One", monospace;
        font-size: 200%
    }

    #bonus-description {
        margin: 10px 0px;
        font-weight: bold;
    }

    .progress-container {
        border: 3px solid white;
        height: 20px;

        #bonus-progress {
            height: 100%;
            width: 0%;
            background-color: var(--pink);
        }
    }
}

#instant-bonus-container {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    color: white;
    text-align: center;
    z-index: 5;
    transition: opacity 200ms, transform 0s 200ms;
    /* transform: scale(0, 0); */
    text-shadow: black 0 0 10px;

    &.visible {
        transition: opacity 800ms, transform 2s 0ms ease-out, text-shadow 1s 2s;
        opacity: 1;
        transform: scale(1.5, 1.25);
        text-shadow: black 0 0 11px;
    }

    #instant-bonus-name {
        font-family: "Rubik Mono One", monospace;
        font-size: 120%
    }

    #instant-bonus-description {
        margin: 10px 0px;
        font-weight: bold;
    }

    #instant-bonus-amount {
        font-family: "Rubik Mono One", monospace;
        font-size: 150%
    }
}