.item {
    position: relative;
    height: 95dvh;
    width: 95dvw;
}

img#background {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(95dvh, 95dvw * 1.5);
    transform: translate(-50%, -50%);
    z-index: 0;
}

img#monster0 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, -823%);
    z-index: 10;
    transition: opacity 0.3s;
}

img#monster1 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-455%, 280%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#monster2 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-320%, -30%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#monster3 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(225%, 280%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#monster4 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(360%, -30%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#monster5 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-185%, 125%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#monster6 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(85%, 125%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH0 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(-627%, 2350%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH1 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(-510%, 490%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH2 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(-395%, 1450%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH3 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(-280%, -440%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH4 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(-165%, 490%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH5 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(65%, 490%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH6 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(185%, 1450%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH7 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(300%, -440%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH8 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(415%, 1450%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#lineH9 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(0.55dvh, 0.55dvw * 1.5);
    transform: translate(530%, 2300%);
    z-index: 11;
    transition: opacity 0.3s;
    opacity: 0;
}

img#count9 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count8 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count7 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count6 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count5 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count4 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count3 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count2 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count1 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#count0 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10.5dvh, 10.5dvw * 1.5);
    transform: translate(-50%, -165%);
    z-index: 12;
    opacity: 0;
}

img#airclaft {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0;
}

img#bullet0 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet1 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet2 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet3 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet4 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet5 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#bullet6 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.2dvh, 3.2dvw * 1.5);
    transform: translate(-50%, 755%);
    z-index: 9;
    opacity: 0;
}

img#introduction {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(52dvh, 52dvw * 1.5);
    transform: translate(-50%, -40%);
    transition: opacity 0.3s;
    z-index: 50;
}

img#ready {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, -175%);
    transition: opacity 0s;
    opacity: 0;
    z-index: 20;
}

img#go {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, -175%);
    transition: opacity 0s;
    opacity: 0;
    z-index: 20;
}

img#playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, 340%);
    transition: opacity 0.3s;
    z-index: 51;
}

img#arrowright {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(100%, 320%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 30;
}

img#arrowleft {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-200%, 320%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 30;
}

img#shootbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, 320%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 30;
}

img#blackboard {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(95dvh, 95dvw * 1.5);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -100;
}

img#retrybutton {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, 150%);
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 41;
}

img#result {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(10dvh, 10dvw * 1.5);
    transform: translate(-50%, -300%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 41;
}

img#defeatenemy {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(3.5dvh, 3.5dvw * 1.5);
    transform: translate(-50%, -440%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 41;
}

img#rank {
    position: absolute;
    top: 50%;
    left: 50%;
    height: min(15dvh, 15dvw * 1.5);
    transform: translate(-50%, -40%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 41;
}

html {
    touch-action: manipulation;
}