OMORI_Android/www.eng/js/porting/css/controls.css

#joyDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    color: whitesmoke;
    width: 50vh;
    height: 50vh;

    z-index: 1488;
    opacity: 0.6;
}

.show-gamepad-button {
    z-index: 1489;
    position: absolute;
    right: 3vh;
    bottom: 3vh;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/omori_show_button.png');
    min-width: 6vh;
    min-height: 6vh;
    opacity: 0.6;
    image-rendering: pixelated;
}

.switch-button {
    z-index: 1489;
    position: absolute;
    left: 3vh;
    bottom: 3vh;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/omori_switch_button.png');
    min-width: 6vh;
    min-height: 6vh;
    opacity: 0.6;
    image-rendering: pixelated;
}

.fps-button {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 90px;
    height: 40px;
    z-index: 1489;
}

.gamepad-buttons {
    opacity: 0.6;
    z-index: 1488;
    position: absolute;
    bottom: 16px;
    right: 32px;

    justify-content: center;
    align-items: center;

    display: flex;
    flex-flow: column nowrap;
}

.gamepad-buttons-row {
    display: flex;
    flex-flow: row nowrap;
    gap: 9vh;
}

.gamepad-button {
    min-width: 18vh;
    min-height: 18vh;
    display: flex;
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.gamepad-bumper {
    z-index: 1488;
    position: absolute;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    min-width: 18.8vh;
    min-height: 12vh;
    image-rendering: pixelated;
}

.A {
    background-image: url('../assets/omori_a_button.png');
}

.B {
    background-image: url('../assets/omori_b_button.png');
    top: 4.5vh;
}

.X {
    background-image: url('../assets/omori_x_button.png');
    top: 4.5vh;
}

.Y {
    background-image: url('../assets/omori_y_button.png');
    top: 9vh;
}

.LB {
    background-image: url('../assets/omori_lb_button.png');
    opacity: 0.6;
    left: 16px;
    bottom: 56vh;
}

.RB {
    background-image: url('../assets/omori_rb_button.png');
    opacity: 0.6;
    right: 16px;
    bottom: 56vh;
}

.dpad-buttons {
    opacity: 0.6;
    z-index: 1488;
    position: absolute;
    bottom: 16px;
    left: 32px;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/omori_dpad.png');
    display: flex;
    flex-flow: column nowrap;
    min-width: 42vh;
    min-height: 42vh;
    image-rendering: pixelated;
}

.dpad-buttons-row {
    display: flex;
    flex-flow: row nowrap;
}

.dpad-button {
    min-width: 12vh;
    min-height: 12vh;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.up {
    /* background-color: blue; */
    bottom: 7.5vh;
    right: 6vh;
}

.left {
    /* background-color: red; */
    right: 7.5vh;
    top: 6vh;
}

.right {
    /* background-color: green; */
    left: 7.5vh;
    bottom: 6vh;
}

.down {
    /* background-color: yellow; */
    top: 7.5vh;
    left: 6vh;
}