* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;

    font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    color: #fff;
    background: #48185f;
}

/* Felt texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    opacity: 0.5;
    mix-blend-mode: soft-light;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' seed='17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

    background-size:
            220px 220px,
            90px 90px;

    filter:
            contrast(160%)
            brightness(115%);
}

/* Uneven felt lighting */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
            radial-gradient(
                    ellipse at 50% 30%,
                    rgba(255, 255, 255, 0.08),
                    transparent 45%
            ),
            radial-gradient(
                    ellipse at center,
                    transparent 45%,
                    rgba(20, 0, 25, 0.25) 100%
            );
}

.page {
    position: relative;
    z-index: 1;

    min-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.loader {
    --square-size: clamp(68px, 12vw, 88px);

    position: relative;

    width: calc(var(--square-size) * 2);
    height: calc(var(--square-size) * 2);

    margin-bottom: 46px;
}

.board {
    display: grid;

    grid-template-columns:
        repeat(2, var(--square-size));

    grid-template-rows:
        repeat(2, var(--square-size));

    width: calc(var(--square-size) * 2);
    height: calc(var(--square-size) * 2);

    overflow: hidden;
    border-radius: 8px;

    /*
      Outline doesn't affect dimensions,
      unlike the previous border.
    */
    outline: 3px solid rgba(0, 0, 0, 0.18);
    outline-offset: 0;
}

.square.light {
    background: #ebecd0;
}

.square.dark {
    background: #779556;
}

/*
  Exactly one square in size.
  So its center is always exactly the center
  of whichever square it occupies.
*/
.logo {
    margin: 0;

    font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            sans-serif;

    font-size: clamp(44px, 7vw, 84px);
    font-weight: 900;

    letter-spacing: 0.15em;
    padding-left: 0.15em;
}

.genre {
    margin: 0 0 42px;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size: clamp(14px, 2vw, 18px);
    font-style: italic;
    font-weight: 400;

    letter-spacing: 0.03em;

    color: rgba(255, 255, 255, 0.7);
}

.genre-txt {
    color: #f3a6d9;
}

.coming-soon {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0;

    font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            sans-serif;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.62);
}

.coming-soon .line {
    width: 26px;
    height: 1px;

    background: rgba(255, 255, 255, 0.28);
}

/*
    Both pawn layers cover the entire board.

    The masks stay fixed while the pawn moves underneath,
    which means its colour can be split between two squares
    during a transition.
*/
.pawn-layer {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

/*
   TL + BR = light squares
*/
.pawn-layer-light {
    clip-path: polygon(
            0 0,
            50% 0,
            50% 50%,
            100% 50%,
            100% 100%,
            50% 100%,
            50% 50%,
            0 50%
    );
}

/*
   TR + BL = green squares

   We use two clipped layers because those areas are disconnected.
*/
.pawn-layer-dark {
    clip-path: polygon(
            50% 0,
            100% 0,
            100% 50%,
            50% 50%,
            50% 100%,
            0 100%,
            0 50%,
            50% 50%
    );
}

.pawn-mover {
    position: absolute;
    top: 0;
    left: 0;

    width: var(--square-size);
    height: var(--square-size);

    animation: pawn-slide 5s ease-in-out infinite;

    will-change: transform;
}

.pawn {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pawn img {
    width: 72%;
    height: 72%;

    display: block;
    object-fit: contain;
}

@keyframes pawn-slide {
    0%,
    5% {
        transform: translate3d(0, 0, 0);
    }

    20%,
    30% {
        transform:
                translate3d(
                        var(--square-size),
                        0,
                        0
                );
    }

    45%,
    55% {
        transform:
                translate3d(
                        var(--square-size),
                        var(--square-size),
                        0
                );
    }

    70%,
    80% {
        transform:
                translate3d(
                        0,
                        var(--square-size),
                        0
                );
    }

    95%,
    100% {
        transform:
                translate3d(
                        0,
                        0,
                        0
                );
    }
}

@media (prefers-reduced-motion: reduce) {
    .pawn-mover {
        animation: none;
    }
}