:root {
    --game-bg-color: #222;
    --game-fg-color: #fff;
    --size-font-16: 1rem;
    --size-font-20: 1.25rem;
    --size-font-24: 1.5rem;
    --size-font-28: 1.75rem;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background-color: var(--game-bg-color);
    font-family: "Press Start 2P", system-ui;
    font-weight: 408;
    font-style: normal;
}

.wrapper {
    width: 100%;
    height: 100%;
    max-width: 90dvw;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#gameCanvas {
    border: 4px solid var(--game-fg-color);
    cursor: none;
}

#score,
#highScore,
#gameOver {
    user-select: none;
    position: absolute;
}

#score {
    color: var(--game-fg-color);
    font-size: var(--size-font-24);
    line-height: 1;
}

#highScore {
    color: var(--game-fg-color);
    font-size: var(--size-font-20);
    line-height: 1;
}

#gameOver {
    color: var(--game-fg-color);
    font-size: var(--size-font-24);
    display: none;
}

#gyroControl {
    color: var(--game-fg-color);
    font-size: var(--size-font-20);
    margin: 32px;
    flex-shrink: 0;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    display: none;
}

/* Responsive design */
@media screen and (orientation: portrait) {
    #gameOver {
        background-color: var(--game-bg-color);
        padding: 16px;
    }
}

@media screen and (max-width: 640px),
(max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    #score,
    #highScore,
    #gameOver,
    #gyroControl {
        font-size: var(--size-font-16);
    }
}

@media screen and (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    #gyroControl {
        padding: 16px 32px;
    }
}

@media all and (display-mode: fullscreen) {
    #gyroControl {
        display: block;
    }
}

@media all and (display-mode: standalone) {
    #gyroControl {
        display: block;
    }
}