.header-top {
    .tile-selectors {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-inline: auto;
        gap: 1rem;
        max-width: 300px;
        padding: 1rem 0;

        label.selector {
            aspect-ratio: 1;
            display: grid;
            place-content: center;
            corner-shape: squircle;
            border-radius: 2.5rem;
            filter: brightness(2.3) contrast(1.2);

            img {
                max-height: 60px;
                object-fit: cover;
            }

            input {
                display: none;
            }

            &:has(input:checked) {
                background: rgb(36, 36, 36);
                box-shadow: 0 0 0 4px #2f2f2f;
            }

            &.river img {
                filter: hue-rotate(155deg) contrast(1.3) brightness(1.5);
            }

            &.town img {
                filter: grayscale(0.2) contrast(1.6) hue-rotate(340deg) brightness(1.1);
            }
        }
    }
}