body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #6D57F6;
    overflow: hidden;
}

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

.phone-controls {
    display: none;
}

@media (max-width: 600px) and (orientation: portrait) {
    * {
        -webkit-tap-highlight-color: transparent;
        /* iOS tap flash */
        -webkit-touch-callout: none;
        /* no touch menu */
        user-select: none;
        touch-action: manipulation;
    }

    .phone-controls {
        display: block;
        position: absolute;
        bottom: 40%;
        width: 100vw;
        height: 40vh;
    }

    canvas {
        width: 100vw;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .btn {
        width: 18vw;
        height: 18vw;
        border: 0;
        position: absolute;
        outline: none;
    }

    .btn-left {
        background: url('assets/ui/dpad_element_west.png');
        background-size: contain;
        top: 50vw;
        left: 5vw;
    }

    .btn-right {
        background: url('assets/ui/dpad_element_east.png');
        background-size: contain;
        top: 50vw;
        left: 32vw;
    }

    .btn-up {
        background: url('assets/ui/dpad_element_north.png');
        background-size: contain;
        top: 35vw;
        left: 18vw;
    }

    .btn-down {
        background: url('assets/ui/dpad_element_south.png');
        background-size: contain;
        top: 65vw;
        left: 18vw;
    }

    .btn-start {
        background: url('assets/ui/button_square_wide.png');
        background-size: contain;
        color: rgba(255, 255, 255, 0.6);
        top: 50vw;
        right: 5vw;
    }
}