@font-face {
    font-family: 'Univia Pro Bold';
    src: url('/fonts/UniviaPro-Bold.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Univia Pro Black';
    src: url('/fonts/UniviaPro-Black.otf') format('opentype');
    font-display: swap;
}

:root {
    font-family: 'Trebuchet MS', Verdana, sans-serif;
    color: #f5f8ff;
    background-color: #702082;
    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-inline: max(var(--safe-left), var(--safe-right));
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background-color: #702082;
}

#app {
    width: var(--app-width, 100vw);
    height: var(--app-height, 100dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    background-color: #702082;
    padding:
        calc(16px + var(--safe-top))
        calc(16px + var(--safe-inline))
        calc(16px + var(--safe-bottom))
        calc(16px + var(--safe-inline));
}

#game-container {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: #702082;
}

#game-container canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 767px) {
    #app {
        padding:
            calc(10px + var(--safe-top))
            calc(10px + var(--safe-inline))
            calc(10px + var(--safe-bottom))
            calc(10px + var(--safe-inline));
    }

    #game-container canvas {
        border-radius: 0;
    }
}

@media (orientation: landscape) {
    #app {
        padding:
            calc(8px + var(--safe-top))
            calc(12px + var(--safe-inline))
            calc(8px + var(--safe-bottom))
            calc(12px + var(--safe-inline));
    }
}