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

:root {
    --viewport-height: 100dvh;
    --page-gutter-x: 0px;
    --page-gutter-top: 0px;
    --page-gutter-bottom: 0px;
    --shell-max-width: 430px;
    --shell-aspect-ratio: 390 / 844;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    color: rgba(255, 255, 255, 0.87);
    background:
        radial-gradient(circle at top, rgba(91, 143, 249, 0.26), transparent 38%),
        radial-gradient(circle at bottom, rgba(255, 206, 84, 0.18), transparent 30%),
        linear-gradient(180deg, #08142f 0%, #102451 55%, #091731 100%);
    -webkit-tap-highlight-color: transparent;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

body {
    min-height: 100svh;
    min-height: 100dvh;
}

#app {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --available-width: calc(100vw - var(--safe-left) - var(--safe-right) - (var(--page-gutter-x) * 2));
    --available-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - var(--page-gutter-top) - var(--page-gutter-bottom));
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: var(--viewport-height);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:
        calc(var(--safe-top) + var(--page-gutter-top))
        calc(var(--safe-right) + var(--page-gutter-x))
        calc(var(--safe-bottom) + var(--page-gutter-bottom))
        calc(var(--safe-left) + var(--page-gutter-x));
}

#game-shell {
    position: relative;
    width: var(--available-width);
    max-width: 100%;
    height: var(--available-height);
    max-height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(29, 53, 112, 0.98) 0%, rgba(13, 28, 67, 0.99) 100%);
    border: none;
    box-shadow: none;
}

#game-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% -4%, rgba(255, 255, 255, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%);
}

#game-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}

#game-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

#game-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

#game-overlay analog-clock {
    position: absolute;
    display: block;
    pointer-events: none;
}

@media (min-width: 768px) {
    :root {
        --page-gutter-x: 24px;
        --page-gutter-top: 20px;
        --page-gutter-bottom: 24px;
    }

    #game-shell {
        width: min(
            var(--shell-max-width),
            var(--available-width),
            calc(var(--available-height) * 390 / 844)
        );
        height: min(var(--available-height), calc(min(
            var(--shell-max-width),
            var(--available-width),
            calc(var(--available-height) * 390 / 844)
        ) * 844 / 390));
        max-height: var(--available-height);
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35);
    }
}