* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: #050818;
    background-image: url("../img/dbl_pull_simulator_pattern.png");
    background-repeat: repeat;
    background-position: center top;
    font-family: "Atma", Arial, system-ui;
    font-style: normal;
    color: #f5f5f5;
    backdrop-filter: blur(5px);

    .fw_light {
        font-weight: 300;
    }

    .fw_regular {
        font-weight: 400;
    }

    .fw_medium {
        font-weight: 500;
    }

    .fw_semibold {
        font-weight: 600;
    }

    .fw_bold {
        font-weight: 700;
    }
}

#logo_wrapper {
    img {
        width: min(270px, 100%);
        aspect-ratio: 16 / 7;
        filter: drop-shadow(0 15px 15px #000000);
        display: block;
        margin: 0 auto;
        cursor: pointer;
    }
}

.container {
    width: 94%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 0 0;
    text-align: center;

    span {
        text-decoration: underline;
    }

    #banner_selector_wrapper {
        margin-bottom: 32px;

        h2,
        #banner_selector {
            font-size: 1.25rem;
        }

        #banner_selector {
            padding: 0 8px;
            max-width: 100%;
            background-color: transparent;
            box-shadow: 0 0 5px 1px #f5f5f5, 0 0 5px 1px #f5f5f5 inset;
            color: #f5f5f5;
            border-radius: 16px;
            border: none;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            backdrop-filter: blur(5px);
        }
    }

    #toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;

        #pull_button_container {
            grid-row-start: 3;
            
            #pull_button {
                padding: 16px 72px;
                font-size: 2rem;
                cursor: pointer;
                background-color: #ffa500;
                /* background: linear-gradient(to right, transparent, #ffa500 5%, #ffa500 95%, transparent); */
                background: linear-gradient(to right, transparent, #f8df4b 5%, #f8df4b 95%, transparent);
                color: #050818;
                border: none;
                position: relative;
                overflow: hidden;

                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 35%, #ffffffcc 50%, transparent 65%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        #all_in_button_container {
            #cc_amount {
                padding: 0 8px;
                max-width: 100%;
                margin-bottom: 16px;
                font-size: 1.25rem;
                background-color: transparent;
                box-shadow: 0 0 5px 1px #f5f5f5, 0 0 5px 1px #f5f5f5 inset;
                color: #f5f5f5;
                border-radius: 16px;
                border: none;
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                backdrop-filter: blur(5px);
            }

            #all_in_button {
                padding: 8px 36px;
                font-size: 1.5rem;
                cursor: pointer;
                background-color: #ffa500;
                background: linear-gradient(to right, transparent, #f8df4b 5%, #f8df4b 95%, transparent);
                color: #050818;
                border: none;
            }
        }

        #pulls,
        #pulls_cost {
            font-size: 1.25rem;
        }
    }

    #pulls_round_info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 16px;

        & > * {
            font-size: 1.125rem;
        }
    }

    #pull_results {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 32px 0;

        .pulled_character {
            flex-basis: calc((100% / 3) - 6px);
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-size: 1.25rem;
            color: #f5f5f5;
            padding: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 1px 2px #000000;
            text-shadow: 0 0 2px #000, -1px -1px 2px #000, 1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
        }

        .ultra {
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #761594, #7c3113, #000278);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .legends_limited {
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #0d0d0d 10%, #e7a039, #f2ea51, #e7a039, #0d0d0d 90%);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .sparking {
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #ef8e35, #f2ea51);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .extreme {
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #f4bff9, #c329f6);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .hero {
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #6fdbe3, #52adb4);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .alternative {
            border-radius: 0;
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #f2ea51 10%, #8bf7fd, #cdf2fd, #8bf7fd, #f2ea51 90%);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }

        .supporter {
            border-radius: 0;
            background: radial-gradient(circle at 25% 20%, #ffffffaa 0, transparent 35%), radial-gradient(circle at 75% 80%, #00000066 0, transparent 60%), linear-gradient(to bottom, #8bf7fd, #cdf2fd, #8bf7fd);

            &.banner {
                &::before {
                    position: absolute;
                    content: "";
                    top: -20%;
                    left: -60%;
                    width: 60%;
                    height: 140%;
                    transform: rotate(25deg);
                    background: linear-gradient(to right, transparent 20%, #ffffffcc 50%, transparent 80%);
                    mix-blend-mode: screen;
                    opacity: 0.9;
                    animation: sweep-light 1.5s ease-in-out infinite;
                }
            }
        }
    }

    #results {
        h3 {
            font-size: 1.125rem;
            margin-bottom: 8px;
        }

        ul {
            text-align: left;
            padding-left: 20px;

            li {
                font-size: 1.125rem;
            }
        }
    }

    footer {
        margin-top: 16px;
        font-size: 16px;

        span {
            color: red;
            text-decoration: none;
        }

        a {
            color: inherit;
        }
    }
}

@media all and (min-width: 400px) {
    html {
        font-size: 20px;
    }

    .container {
        #pull_results {
            .pulled_character {
                flex-basis: calc((100% / 4) - 6px);
                font-size: 1rem;
            }
        }
    }
}

@media all and (min-width: 600px) {
    html {
        font-size: 24px;
    }

    #logo_wrapper {
        img {
            width: min(330px, 100%);
        }
    }

    .container {
        #pull_results {
            .pulled_character {
                flex-basis: calc((100% / 5) - 7px);
            }
        }

        #results {
            ul {
                padding-left: 25px;
            }
        }
    }
}

@media all and (min-width: 992px) {
    html {
        font-size: 28px;
    }
    
    #logo_wrapper {
        img {
            width: min(500px, 100%);
        }
    }

    .container {
        #banner_selector_wrapper {
            h2,
            #banner_selector {
                font-size: 1.2rem;
            }
        }

        #toolbar {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;

            #pull_button_container {
                grid-row-start: unset;
            }

            #all_in_button_container {
                grid-column-start: 1;
                grid-column-end: span 4;

                #cc_amount {
                    font-size: 1.2rem;
                }
            }

            #pulls,
            #pulls_cost {
                font-size: 1.2rem;
            }
        }

        #pulls_round_info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            padding: 0 0 16px 0;

            & > * {
                font-size: 1.125rem;
            }
        }

        #pull_results {
            .pulled_character {
                flex-basis: calc((100% / 10) - 8px);
                font-size: 0.70rem;
            }
        }

        #results {
            ul {
                padding-left: 30px;
            }
        }
    }
}

@keyframes sweep-light {
  0% {
    transform: rotate(25deg);
    left: -60%;
  }
  100% {
    transform: rotate(25deg);
    left: 100%;
  }
}