body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #0f0f0f;

    /*  On a phone, the fingers play the game: no scrolling, zooming or selecting text by accident. */
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0f0f0f;
}

#game-container {
    width: 100%;
    height: 100%;
}

/*  A phone standing up: the game needs it lying down. */
#girar {
    display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
    #girar {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 10;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background-color: #17120f;
        color: #ffffff;
        font-family: 'Arial Black', Arial, sans-serif;
        font-size: 26px;
        text-align: center;
    }

    #girar p {
        margin: 8px 0;
    }

    #girar .detalhe {
        font-family: Arial, sans-serif;
        font-size: 18px;
        color: #c9c9d2;
    }

    #girar .celular {
        font-size: 64px;
        animation: girar 2s ease-in-out infinite;
    }
}

@keyframes girar {
    0%, 30% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
}