body
{
    --unit: 12vh;
}
body
{
    --position: calc(100% - (var(--unit) * 2.3 ))
}
.scene
{
    --pos: 0;

    width: 100%;
    top: var(--position);
    height: 1000%;
    position: absolute;
    left: 0;
    background-image: linear-gradient(#00000070,#00000070), url(./../assets/blocks/block-stone.png);
    background-size: calc(var(--unit) * .9) calc(var(--unit) * .9);
    background-position: center top;
    image-rendering: pixelated;
    transform: translateY(calc(var(--unit) * var(--pos) * -1));
}
#gameArea.intro .scene
{
    --pos: 15;
}
.scene .wall
{
    position: absolute;
    height: 100%;
    width: calc(50% - 2.5 * var(--unit));
    background-image: url(./../assets/blocks/block-stone.png);
    background-size: var(--unit) var(--unit);
    image-rendering: pixelated;
    transform: translateY(calc(.49 * var(--unit)));
}
.scene .wall .wall-side {
    height: 100%;
    width: calc(var(--unit) / 3);
    background-image: linear-gradient(#00000042,#00000042), url(./../assets/blocks/block-stone.png);
    background-size: calc(var(--unit) / 3) calc(var(--unit) * 1);
    image-rendering: pixelated;
    position: absolute;
    left: 100%;
    transform: skewY(-45deg) translateY(calc(-.16666 * var(--unit)));
}

.scene .cover
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(var(--unit) * 10);
    background-image: linear-gradient(0deg, #321e11 calc(var(--unit) * 8), transparent calc(var(--unit) * 9));
    transition: opacity 150ms;
    z-index: 10;
    /* opacity: 0;*/
}
.scene .shadow
{
    width: 100%;
    position: absolute;
    top: calc(var(--unit) * 1.5);
    left: 0;
    background-image: radial-gradient(at 100% 100%, #000000ba, transparent 70%),
    linear-gradient(-90deg, #000000ba, transparent),
    radial-gradient(at 0 100%, #000000ba, transparent 70%),
    linear-gradient(90deg, #000000ba, transparent);

    z-index: 9;
    background-size: calc(50% - (var(--unit) * 2.5)) calc(var(--unit) * 2),
    calc(50% - (var(--unit) * 2.5)) 100%,
    calc(50% - (var(--unit) * 2.5)) calc(var(--unit) * 2),
    calc(50% - (var(--unit) * 2.5)) 100%;

    background-position: 100% 0,
    100% calc(var(--unit) * 1.99),
    0 0,
    0 calc(var(--unit) * 1.99);
    background-repeat: no-repeat;
    height: 100%;
}
.scene .cover.hidden
{
    transition: opacity 300ms;
    opacity: 0
}

#gameArea.intro .scene .cover
{
    opacity: 0;
}

.scene  .wall-top {
    width: calc(100% + max(120%, 150px));
    right: 0;
    height: calc(var(--unit) / 3);
    background-image: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)), url(./../assets/blocks/block-grass-top.png);
    background-size: calc(var(--unit) * 1) calc(var(--unit) / 3);
    image-rendering: pixelated;
    position: absolute;
    bottom: 100%;
    transform: skewX(-45deg) translate(1px, 1px) translateX(calc(.1666 * var(--unit)));
    background-position: center center;
}


.scene .wall-texture
{
    position: absolute;
    width: 100%;
    height: var(--unit);
    background-size: var(--unit) var(--unit);
}
.scene .wall-side .wall-texture
{
    background-size: calc(var(--unit) / 3) calc(var(--unit) * 1);
}
.scene .wall-dirt
{
    background-image: url(./../assets/blocks/block-dirt-side.png);
    top: calc(var(--unit) * .99);
    background-repeat: repeat-x;
}
.scene > .wall-dirt
{
    background-image: linear-gradient(#00000070,#00000070),  url(./../assets/blocks/block-dirt-side.png);
}

.wall.left .wall-side .wall-texture.wall-dirt
{
    background-image: linear-gradient(#00000042,#00000042), url(./../assets/blocks/block-dirt-side.png);
}

.wall.left .wall-side .wall-texture.wall-grass
{
    background-image: linear-gradient(#00000042,#00000042), url(./../assets/blocks/block-grass-side.png);
}

.scene .wall-grass
{
    background-image: url(./../assets/blocks/block-grass-side.png);
    top: 0;
    background-repeat: repeat-x;
}
.scene > .wall-grass
{
    background-image: linear-gradient(#00000070,#00000070),  url(./../assets/blocks/block-grass-side.png);
}

.scene .wall.left
{
    left: 0;
    background-position: right center;
}

.scene .wall.left .wall-top
{
    background-position: right center;

}
.scene .wall.right .wall-top
{
    background-position: left center;
    width: 100%;

}
.scene .wall.right
{
    right: 0;
    background-position: left center;
    z-index: 6;
}


#block-container
{
    width: calc(5 * var(--unit));
    left: 50%;
    transform: translate(-50%, calc(.333 * var(--unit)));
    position: absolute;
    height: 100%;
}
.block
{
    --x: 0;
    --y: 0;
    position: absolute;
    background-size: 100% 100%;
    left: calc(var(--x) * var(--unit));
    top: calc(var(--y) * var(--unit));
    width: var(--unit);
    height: var(--unit);
    background-image: var(--background);
    font-size: calc(var(--unit) / 2);
    line-height: var(--unit);
    text-align: center;
    font-weight: bold;
    scale: 1.01;
}
.block .side
{
    height: var(--unit);
    width: calc(var(--unit) / 3);
    background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--background);
    left: 100%;
    position: absolute;
    transform: translateY(calc(var(--unit) * -.16666)) skewY(-45deg);
    background-size: 100% 100%;
    top: 0;
}
.block .top
{
    width: var(--unit);
    height: calc(var(--unit) / 3);
    background-image: linear-gradient(rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0.15)), var(--background);
    bottom: 100%;
    position: absolute;
    transform: translateX(calc(var(--unit) * .16666)) skewX(-45deg);
    background-size: 100% 100%;
}
.block .top.grass
{
    height: calc(var(--unit) / 2);
    transform: translateX(calc(var(--unit) * .25)) skewX(-45deg);
}
#gameArea
{
    --sceneY: 0;
    overflow: hidden;
    position: relative;
}
.pickaxe
{
    position: absolute;
    width: var(--unit);
    height: var(--unit);
    top: calc(var(--position) - (var(--unit) * 3 ));
    left: calc(50% - (var(--unit) / 2));
    background-image: url(./../assets/pickaxe.png);
    background-size: cover;
    --jump: 0;
    --baseY: .5;
    --clientX: 0px;
    --clientY: 0px;
    --pos: 2;
    transform: translate(calc(var(--clientX) + ((var(--pos) - 2) * var(--unit))), calc(var(--clientY) + ((var(--baseY) + (var(--jump) * 1.5) * -1) * var(--unit)))) rotate(calc(var(--jump) * .55turn + .45turn));
}
#gameArea.idle .pickaxe
{
    transform: translate(calc(var(--clientX) + ((var(--pos) - 2) * var(--unit))), calc(var(--clientY) + ((var(--baseY)) * var(--unit))));
}
#money-display .currency
{
    font-size: 45px;
    margin-right: 5px;
}
#money-display
{
    position: absolute;
    left: 50%;
    /* width: 100%; */
    text-align: center;
    bottom: 140px;
    font-size: 50px;
    font-weight: bold;
    color: transparent;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    transform: translateX(-50%);
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 3px black) brightness(1.5);
    z-index: 1000;
}


.pickaxe-ui
{
    position: absolute;
    left: 50%;
    bottom: 45%;
    transform: translateY(calc(var(--unit) + 8px)) translateX(-50%);
    z-index: 99;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.pickaxe-cont
{
    display: flex;
    gap: 4px;
    /*background: linear-gradient(45deg, #5555e1, #38b6e0);*/
    padding: 10px;
    border-radius: 16px;
    position: relative;
}
.pickaxe-cont-label
{
    width: 90vw;
}
#gameArea:not(.idle) .pickaxe
{
    pointer-events: none;
}
#gameArea:not(.idle) .pickaxe-ui
{
    display: none;
}
.pickaxe-slot
{
    width: calc(var(--unit) - 24px);
    height: calc(var(--unit) - 24px);
    border: ridge 10px;
    border-top-color: gray;
    border-left-color: gray;
    border-right-color: lightgray;
    border-bottom-color: lightgray;
    background: #8080808c;
    outline: 4px solid black;
}
.pickaxe-ui .pickaxe-cont-label
{
    font-size: 24px;
    text-shadow: 1px 1px 0 white;
}
.flying-item
{
    width: 40px;
    height: 30px;
    background: url(./../assets/ingot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.scene > .wall.right
{
    background-image: url(./../assets/blocks/block-stone.png);
    background-size: var(--unit) var(--unit);
    top: calc(var(--unit) * -.1666);
}
.scene > .wall.left
{
    background-image: url(./../assets/blocks/block-stone.png);
    background-size: var(--unit) var(--unit);
    top: calc(var(--unit) * -.1666);
}
@media screen and (max-width: 700px) and (orientation: portrait) {
    body {
        --position: 50vh;
    }
    .pickaxe-slot {
        width: calc(var(--unit) - 16px);
        height: calc(var(--unit) - 16px);
        border: ridge 6px;
        border-top-color: gray;
        border-left-color: gray;
        border-right-color: lightgray;
        border-bottom-color: lightgray;
        background: #8080808c;
        outline: 2px solid black;
    }
}
@media screen
and (orientation: landscape)

and (max-height: 650px) {
    body {
        --unit: 15vh;
    }
}
@media screen
and (orientation: landscape)

and (max-height: 500px) {
    body {
        --unit: 10vw;
    }
    body
    {
        --position: calc(100% - (min(0vh, var(--unit) * 2.3 )));
    }
    #gameArea.idle .pickaxe
    {
        --baseY: 0;
    }
    #money-display
    {
        bottom: 10px;
        font-size: 35px;
    }
    #money-display .currency
    {
        font-size: 26px;
        margin-right: 3px;
    }
    .pickaxe-ui .pickaxe-message {
        font-size: 25px;
    }
    .pickaxe-ui .pickaxe-cont-label {
        font-size: 24px;
    }
    .pickaxe-ui {
        bottom: 30%;
        text-shadow: 1px 1px white, 1px 1px 5px #ffffff78;
    }
    .pickaxe-slot {
        width: calc(var(--unit) - 16px);
        height: calc(var(--unit) - 16px);
        border: ridge 6px;
        border-top-color: gray;
        border-left-color: gray;
        border-right-color: lightgray;
        border-bottom-color: lightgray;
        background: #8080808c;
        outline: 2px solid black;
    }
    .pickaxe-cont-label, #pickaxe-message, .pickaxe-promo {
        width: 55vw !important;
    }
    .pickaxe {
        transform: translate(calc(var(--clientX) + ((var(--pos) - 2) * var(--unit))), calc(var(--clientY) + ((var(--baseY) + (var(--jump) * .5) * -1) * var(--unit)))) rotate(calc(var(--jump) * .55turn + .45turn));
    }

}

@media screen
and (orientation: landscape)

and (max-height: 300px) {
    .pickaxe-cont
    {
        padding: 0;
    }
    .pickaxe-ui .pickaxe-promo
    {
        gap: 5px
    }
    .pickaxe-ui
    {
        bottom: 0;
    }
    .pickaxe-ui {
        bottom: 5%;
        transform: translateX(-50%) translateY(0%);
        /* top: 50%; */
    }
    .ui #autoplay {
        transform: translate(0, calc(-50% + 50px));
    }
    .ui #autoplay-label {
        transform: translate(-50%, calc(-50% + 87px));
    }
    .pickaxe-ui .pickaxe-message {
        font-size: 20px;
    }
    .pickaxe-ui .pickaxe-cont-label {
        font-size: 20px;
    }
    .ui .spin#stop
    {
        transform: translate(0, calc(-50% - 10px));
    }
    .logo-container {
        height: 40px;
    }
    #block-table {
        grid-template-columns: repeat(2, 1fr);
    }
    .ui .bet-container {
        padding: 0 16px;
    }

    .ui #bet-increase, #bet-decrease
    {
        width: 6px;
        height: 30px;
        max-width: 6px;
        min-width: 6px;
        position: absolute;
        font-size: 0;
        box-sizing: border-box;
        aspect-ratio: initial;
    }
    #bet-increase {
        right: -6px;
    }
    #bet-decrease
    {
        left: -6px;
    }
    #block-table-tnt .ore-icon {
        width: calc(20% + 30px);
        text-align: center;
    }
}