@layer root {
    :root {
        color-scheme: dark;

        --blue: #002c84;
        --red: #ff0037;

        --white: #ffffff;
        --black: #010f21;

        --radius: 1rem;
        --shadow: 0 0 1rem rgba(from var(--black) r g b / 0.25);
        --shadow-dk: 0 0 2rem rgba(from var(--black) r g b / 0.5);

        --font-family: 'Inter', sans-serif;
        --font-size: 16px;
        --gap: 2rem;

        --body-line-height: 1.5;
        --body-font-weight: 400;

        --heading-line-height: 1.2;
        --heading-font-weight: 700;

        --nav-height: 6rem;
        --padding: 2rem;

        --transition:   opacity 0.25s linear,
                        box-shadow 0.25s ease-out,
                        background-color 0.25s ease-out,
                        transform 0.25s ease-out;
        
    }

    * {
        box-sizing: border-box;
    }

    html, body {
        font-family: var(--font-family);
        font-size: var(--font-size);
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow-x: hidden;
        color: var(--white);
        background-color: var(--blue);
    }

    body {
        margin: 0;
        font-size: 1rem;
        line-height: var(--body-line-height);
    }

    p, ul, li, a {
        color: var(--white);
        font-size: 1rem;
        font-family: var(--font-family);
        line-height: var(--body-line-height);
        font-weight: var(--body-font-weight);
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: var(--font-family);
        line-height: var(--heading-line-height);
        font-weight: var(--heading-font-weight);
    }
    h1 {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    h2 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
    h3 {
        font-size: clamp(1.25rem, 3vw, 2rem);
    }
    h4 {
        font-size: clamp(1rem, 2vw, 1.5rem);
    }
    h5 {
        font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    }
    h6 {
        font-size: clamp(0.75rem, 1vw, 1rem);
    }

    a {
        transition: var(--transition);
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
}

@layer nav {
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: calc(var(--nav-height) + (var(--padding) * 2));
        padding: var(--padding);

        position: sticky;
        top: 0;
        z-index: 1000;

        & a {
            display: inline-block;
            text-decoration: none;
            transition: var(--transition);
            &:hover, &:focus {
                opacity: 0.75;
            }
        }

        & > span {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        & img {
            width: auto;
            height: auto;
            max-height: clamp(1rem, 5vw, 2.5rem);

            &.badge {
                max-height: var(--nav-height);
                rotate: 5deg;

                animation: pulsate 2s infinite forwards ease;
            }
        }
    }
    @media(max-width: 991px) {
        :root {
            --nav-height: 3rem;
        }
    }

    @keyframes pulsate {
        0% {
            transform: scale(1);
            rotate: 5deg;
        }
        50% {
            transform: scale(1.1);
            rotate: 0deg;
        }
        100% {
            transform: scale(1);
            rotate: 5deg;
        }
    }
}

@layer main {
    .app {
        min-height: 100dvh;
        width: 100%;
        max-width: 1400px;
        margin-inline: auto;
        display: grid;
        grid-template-rows: calc(var(--nav-height) + (var(--padding) * 2)) minmax(0, 1fr) auto;

        container-type: inline-size;
        container-name: app;
    }

    main {
        height: calc(100dvh - (var(--nav-height) + (var(--padding) * 2)));
        min-height: calc(100dvh - (var(--nav-height) + (var(--padding) * 2)));
    }

    .grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: var(--gap);

        height: 100%;

        padding-block-start: 0;
        padding-inline: var(--padding);
        padding-block-end: calc(var(--padding) * 2);

        & > a {
            min-height: 0;
            text-decoration: none;
        }

        & .card {
            grid-template-rows: auto minmax(0, 1fr);
            gap: var(--gap);

            justify-items: center;
            align-items: center;
        }
    }

    @container app (max-width: 991px) {
        .grid {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        }
    }
}

@layer card {
    .card {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;

        border-radius: var(--radius);
        overflow: clip;
        box-shadow: var(--shadow);

        align-items: center;
        justify-items: center;
        position: relative;
        isolation: isolate;

        background-color: var(--black);

        height: 100%;

        &:hover, &:focus-within {
            box-shadow: var(--shadow-dk);
            & .background {
                opacity: 0.75;
            }
        }

        & .background {
            grid-area: 1 / 1 / -1 / -1;
            z-index: 0;
            object-fit: cover;
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0.5;

            position: absolute;

            transition: var(--transition);

            & .img {
                position: relative;
                inset: 0;
                width: 100%;
            }
        }

        & .content {
            width: 100%;
            height: 100%;
            grid-area: 1 / 1 / -1 / -1;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
            justify-content: center;
        }

        & .game-logo {
            width: auto;
            max-width: 100%;
            height: min(20rem, 25vw);
            margin-inline: auto;
        }
        @container app (max-width: 991px) {
            & .game-logo {
                height: min(10rem, 20vh);
            }
        }
    }
}

@layer button {
    .play-button {
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;

        display: inline-block;
        padding: 1ex 2.5ex;
        border-radius: 99rem;

        color: var(--white);
        background-color: var(--red);
        background-image: linear-gradient(to bottom, var(--red), hsl(from var(--red) h s calc(l / 2)));
        
        font-weight: var(--heading-font-weight);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: var(--transition);

        &:not(.coming-soon) {
            box-shadow: var(--shadow);
            animation: tempt 2s infinite forwards linear ease;
        }

        &.coming-soon {
            background-color: var(--blue);
            background-image: linear-gradient(to bottom, var(--blue), hsl(from var(--blue) h s calc(l / 2)));
        }
        
        
    }

    @container app (max-width: 991px) {
        .play-button {
            font-size: 1.25rem;
            padding: 0.75ex 2ex;
        }
    }

    a {
        &:nth-of-type(2n+0) {
            & .play-button {
                animation-delay: 0s;
            }
        }
        &:nth-of-type(2n+1) {
            & .play-button {
                animation-delay: 1s;
            }
        }
    }
    @keyframes tempt {
        0% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.1);
        }
        50% {
            transform: scale(1);
        }
    }
}

@layer footer {
    footer {
        opacity: 0.5;
        padding-block-start: 0;
        padding: var(--padding);
    }
}