html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bodoni-Bold';
    font-size: 0;
}

/*
 * The font files in public/assets/fonts/ are written by AssetPack with
 * content-based hash suffixes (cacheBust: true in vite.config). The CSS has
 * to match those exact filenames, otherwise the browser 404s on @font-face.
 *
 * Hashes are content-derived so they're stable across builds until a font
 * file actually changes. If you ever swap a .ttf, regenerate via:
 *   ls public/assets/fonts/
 * and update the urls below to the new hashed names.
 *
 * URLs are resolved relative to this stylesheet's URL. style.css and
 * assets/ are siblings inside the deploy root (e.g. /slots/gates-of-atlantis/),
 * so use `./assets/...` — NOT `../assets/...`, which under a subpath deploy
 * walks above the deploy root (e.g. to /slots/assets/...) and 404s.
 *
 * TODO: long-term, move these to a Vite-managed CSS file (src/styles/...)
 * so Vite rewrites the urls automatically and we don't have to keep this
 * file in sync with the AssetPack hash by hand.
 */
@font-face {
    font-family: 'Roboto-SemiBold';
    src: url('./assets/fonts/Roboto-SemiBold-SgJ2mw.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('./assets/fonts/Roboto-Bold-r40OXw.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Bodoni-Bold';
    src: url('./assets/fonts/BodoniBold-9zGwyA.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}
#root {
    position: absolute;
    font-family: 'Roboto-SemiBold';
    font-size: 0;
}
canvas {
    overflow-clip-margin: content-box;
    overflow: clip;
}