div#minii {
    background-color: #9ABa46;
}

.miniContainer {
    flex: 1;
    position: relative;
    touch-action: none;
}

.miniLayer {
    position: absolute;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
    transform-origin: top left;
    width: 604px;
    height: 463px;
    image-rendering: pixelated;
}

.miniObject {
    image-rendering: pixelated;
    background-repeat: no-repeat;
    position: absolute;
    pointer-events: none;
}

.miniBackground {
    z-index: 0;
}

.miniBackground.midlands {
    background-image: url('../image/mini/scenes/midlands/background.png');
}

.miniForeground {
    position: relative;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    image-rendering: pixelated;
    z-index: 1500;
    pointer-events: none;
}

.miniForeground.midlands {
    background-image: url('../image/mini/scenes/midlands/foreground.png');
}

.midlandsTree {
    left: 90px;
    top: 105px;
    width: 189px;
    height: 175px;
    z-index: 281;
    background-image: url('../image/mini/scenes/midlands/tree.png');
}

.midlandsBush1 {
    left: 195px;
    top: 25px;
    width: 53px;
    height: 28px;
    z-index: 53;
    background-image: url('../image/mini/scenes/midlands/bush1.png');
}

.midlandsBush2 {
    left: 368px;
    top: 75px;
    width: 55px;
    height: 28px;
    z-index: 103;
    background-image: url('../image/mini/scenes/midlands/bush2.png');
}

.midlandsBush3 {
    left: 463px;
    top: 123px;
    width: 31px;
    height: 21px;
    z-index: 144;
    background-image: url('../image/mini/scenes/midlands/bush3.png');
}

.midlandsBush4 {
    left: 507px;
    top: 160px;
    width: 53px;
    height: 24px;
    z-index: 184;
    background-image: url('../image/mini/scenes/midlands/bush4.png');
}

.midlandsBush5 {
    left: 41px;
    top: 276px;
    width: 38px;
    height: 25px;
    z-index: 301;
    background-image: url('../image/mini/scenes/midlands/bush5.png');
}

.midlandsRock1 {
    left: 18px;
    top: 365px;
    width: 80px;
    height: 33px;
    z-index: 398;
    background-image: url('../image/mini/scenes/midlands/rock1.png');
}

.midlandsRock2 {
    left: 406px;
    top: 15px;
    width: 85px;
    height: 40px;
    z-index: 55;
    background-image: url('../image/mini/scenes/midlands/rock2.png');
}

.midlandsRock3 {
    left: 555px;
    top: 130px;
    width: 20px;
    height: 15px;
    z-index: 145;
    background-image: url('../image/mini/scenes/midlands/rock3.png');
}

.midlandsBug {
    image-rendering: pixelated;
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 7px;
    height: 7px;
    background-image: url('../image/mini/scenes/midlands/bug.png');
    cursor: pointer;
}

.miniZoomOutButton {
    background-image: url('../image/buttons/zoom_out.png');
    width: 32px;
    height: 32px;
    position: absolute;
    left: 4px;
    top: 48px;
    cursor: pointer;
    z-index: 2000;
}

.miniZoomInButton {
    background-image: url('../image/buttons/zoom_in.png');
    width: 32px;
    height: 32px;
    position: absolute;
    left: 4px;
    top: 8px;
    cursor: pointer;
    z-index: 2000;
}

.miniZoomOutButton.disabled, .miniZoomInButton.disabled {
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
}

.miniCharacter {
    position: absolute;
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    cursor: pointer;
}

.miniPopup {
    position: absolute;
    z-index: 1000;
    border: 2px solid var(--tile-border-color);
    background: var(--tile-background-color);
    color: var(--tile-color);
    border-radius: 8px;
    max-width: 100px;
    max-height: 100px;
    overflow-y: auto;
    font-size: 4pt;
    padding: 8px;
}

.miniLoading {
    cursor: progress !important;
}

.miniCharacterName {
    font-weight: bold;
    padding-bottom: 2px;
}