/* https://css-tricks.com/revisiting-prefers-reduced-motion/ */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/*
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.tpgi.com/the-anatomy-of-visually-hidden/
*/
.visually-hidden:not(:focus, :active) {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

:root {
    --layout-gap: 2rem;
    --element-gap: 0.5rem;
}

body {
    background-image: url("images/marijke's-hell.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2vh 3vw;
}

/* Landing page: no background image. */
body.landing {
    background-image: none;
}

/* bm bingo: very faded WSFS logo. */
body.bm {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
        url("images/wsfs.png");
    background-size: 40rem;
}

h1 {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.25rem;
    font-size: 3rem;
    inline-size: max-content;
    margin: 0 auto;
    max-inline-size: 100%;
    padding: 0.2em 0.3em;
    text-wrap: balance;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

.grid-wrapper {
    overflow-x: auto;
    padding-block: var(--layout-gap);
}

.actions ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--element-gap);
    justify-content: center;
    list-style-type: "";

    & button {
        background-color: rgba(66, 153, 225);
        border-color: rgb(226, 232, 240);
        border-radius: 1rem;
        color: white;
        font-size: 2.5rem;
        padding: 0.1em 0.15em;
        transition: background 200ms ease-in;

        &:hover,
        &:focus {
            background-color: rgb(0, 81, 177);
        }

        &:focus-visible {
            outline: 4px solid white;
        }
    }
}

#bingo {
    --cell-size: 10rem;
    display: grid;
    font-family: monospace;
    gap: 0.25rem;
    grid: repeat(5, var(--cell-size)) / auto-flow var(--cell-size);
    inline-size: max-content;
    list-style-type: "";
    margin-inline: auto;

    & > li {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid black;
        border-radius: 1rem;
        border-width: 3px;
        cursor: pointer;
        padding: 0.5rem;

        &:hover {
            background:
                linear-gradient(
                    rgba(255, 255, 255, 0.7),
                    rgba(255, 255, 255, 0.7)
                ),
                url("images/hashtag-eu.avif");
            background-position: center;
            background-size: 215%;
        }

        &.active {
            background-image: url("images/stamp.png");
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
}

body:has(#bingo.carlton) {
    background: none;

    & .grid-wrapper {
        background-image: url("images/carltonbg.jpg");
        background-position: right;
        background-repeat: repeat-x;
        background-size: contain;
    }

    & #bingo > li.active {
        background-image: url("images/carlton.png");
    }

    & .actions {
        margin-block-start: var(--layout-gap);
    }
}