/* Reset, the theatre canvas, and the projected-film overlays. */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 4rem 1.5rem;
    min-height: 100vh;
    /* The home page sits centred in the frame; once a game is on we top-align
       so a tall board can never push the title off the top of the screen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    background-color: var(--obsidian);
    background-image:
        radial-gradient(ellipse 130% 90% at 50% -15%, #1D1D21 0%, transparent 62%),
        repeating-linear-gradient(to bottom, rgba(245, 242, 234, 0.012) 0 1px, transparent 1px 3px);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* vignetteing */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%,
            transparent 0%,
            transparent 38%,
            rgba(var(--shadow), 0.55) 74%,
            rgba(var(--shadow), 0.92) 100%);
}

body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 900ms steps(2) infinite;
}

.hero::after {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(ellipse 30% 40% at 18% 22%, rgba(245, 242, 234, 0.035), transparent 70%),
        radial-gradient(ellipse 26% 34% at 82% 68%, rgba(245, 242, 234, 0.03), transparent 70%),
        radial-gradient(ellipse 40% 26% at 60% 12%, rgba(245, 242, 234, 0.022), transparent 70%);
}

body.is-playing {
    justify-content: flex-start;
    padding-bottom: 6rem;
}

@keyframes grain {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-3%, 2%);
    }

    100% {
        transform: translate(2%, -2%);
    }
}

@media only screen and (max-width: 600px) {
    body {
        padding: 2.5rem 1rem;
        font-size: 16px;
    }

    body.is-playing {
        padding-bottom: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    body::after,
    .wordmark,
    .marquee-lights::before,
    .marquee-lights::after,
    #game-stage.is-blown .bulb.is-lit,
    #game-stage.is-blown #game-div,
    body.is-playing .hero,
    body.is-playing .hero-actions,
    body.is-playing #game-stage,
    body.is-playing #custom-game-form {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}