html, body {
    background-color: rgba(20,20,20);
    overflow: hidden;
    font-family: "Silkscreen";
    -webkit-user-select: none;
    user-select: none;
    margin: 0;
    height: 100dvh;

    touch-action: none;

    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.canvasContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

canvas {
    background-color: rgba(20,20,20);
    /* width: 500px;*/
    /* height: 100vh;  */
    /* image-rendering: pixelated; */
    /* image-rendering: crisp-edges; */
    top: 0;
}

@media (orientation: portrait) {
  
    canvas {
        width: 100vw;
    }


    .lowerHUD {
        position: absolute;
        bottom: 8vw;
        z-index: 100;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* height: 50vh; */
        width: 100vw;
        gap: 2vw 2vw;
        flex-wrap: wrap;
    }

    button {
        width: 20vw;
        height: 20vw;
        font-size: 5vw;
        border-radius: 4vw;
        outline: none;
        border: none;
        background: rgba(100,100,100,0.5);
        color: white;
        font-family: "Silkscreen";
        touch-action: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1vw;
        /* box-shadow: 0 0 5vw 0.1vw #EF233C; */
        /* text-shadow: 0 0 1vw #fff; */
    }

}

button {
    /* Prevents the default "darkening" or "highlight" box on mobile */
    -webkit-tap-highlight-color: transparent;
    
    /* Optional: Prevents the system context menu (like 'save image') 
       from popping up during long presses, which can interfere 
       with your hold-to-deploy mechanic */
    -webkit-touch-callout: none;
    
    /* Ensures text/buttons aren't accidentally selected while tapping fast */
    user-select: none;
    transition: 0.15s !important;
}





.emptyButton {
    background: rgba(100,100,100,0.25);
}

p {
    margin: 0;
}

button > svg {
    stroke-width: 1;
    color: #FFFFFF;
    /* fill: #FFFFFF; */
    stroke: #FFFFFF;
    width: 5vw;
    height: 5vw;
}


.costs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    gap: 3vw;
}

.costs > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    gap: 1vw;
}

.costs > div > svg {
    width: 5vw;
    height: 5vw;
}

.costs > div > p {
    margin: 0;
    padding-bottom: 0.5vw;
}

.levelLabel {
    color: rgb(195, 195, 195);
    margin-right: 2vw !important;
}

/* button:active {
    scale: 0.9;
    background: rgba(255,255,255,0.15);
    transition: 0.2s;
} */

.wideButton {
    width: 42vw;
}

.threeWideButton {
    width: 64vw;
}

.tallButton {
    width: 42vw;
}

.hugeButton {
    width: 86vw;
}


.resources {
    width: 86vw;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    /* gap: 20vw; */
}

.resources > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 2vw;
}

.resources > div > p {
    /* color: white; */
    font-size: 5vw;
    margin: 0;
    margin-bottom: 1vw;
}

.resources > div > img {
    /* filter:brightness(100); */
    width: 15vw;
    height: 15vw;
}

.resources > div > svg {
    width: 5vw;
    height: 5vw;
}

.energy {
    stroke-width: 1;
    color: #F5D752;
    fill: #F5D752;
    stroke: #F5D752;
}

.material {
    stroke-width: 1;
    color: #2EBFA5;
    fill: #2EBFA5;
    stroke: #2EBFA5;
}

.crystal {
    stroke-width: 1;
    color: rgb(211, 54, 242);
    fill: #d338f2;
    stroke: #d338f2;
}

.tips {
    width: 86vw;
    height: 20vw;
    display: flex;
    align-items:flex-end;
    justify-content: space-around;
    flex-direction: row;
}

.tips > p {
    color: rgba(120, 120, 120, 1);
    font-size: 5vw;
    text-align: center;
    /* bottom: 0; */
}


/* Menu Sections */

.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    gap: 2vw 2vw;
    flex-wrap: wrap;
}

/* .deviceMenu {
    display: none !important;
} */

.version {
    z-index: 100;
    position: absolute;
    color: #cccccc;
    right: 10px;
    top: 0;
    font-size: 1vw;
}