body {
    margin: 0;
    overflow: hidden;
    background: #222;
    user-select: none;
    -webkit-user-select: none;
      font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.roboto-mono-uniquifier{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body.mars {
    background: #821e1e;
}
body.earth,
body.slime {
    background: #3697f2;
}
body.moon {
    background: #1e0223;
}
body.ocean {
    background: #87ceeb;
}

.ground {
    position: fixed;   
    bottom: 0;         
    left: 0;           
    width: 100%;       
    height: 40vh;      
    z-index: 1000;     
    background-repeat: repeat-x, repeat;
    background-position: top left, top left;
    background-size: 8vw 8vw, 8vw 8vw; /*i intentionally misaligned the blocks*/
    image-rendering: pixelated; 
}

.ground.earth {
    background-image: url('grass.png'), url('dirt.png');
}
.ground.mars {
    background-image: url('ngrass.png'), url('netherrack.png');
}
.ground.moon {
    background-image: url('endstone.png'), url("endstone.png");
}
.ground.ocean {
    /* Hide ground for ocean biome so we can see the deep water particles */
    display: none;
}
.ground.slime {
    background-image: url('slime.png'), url("slime.png");
}

/* World & layers */

#world {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#projectile-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1500;
}

#fluid-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}
#fluid-canvas {
    position: absolute;
    inset: 0;
    image-rendering: pixelated;
    width: 100vw;
    height: 100vh;
}

.projectile {
    position: absolute;
    transform: translate(-50%, 50%);
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 1600;
}

.placed-block {
    position: absolute;
    transform: translate(0%, 0%);
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 1100;
}

.grid-highlight {
    position: absolute;
    border: 0.3vh dashed rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1050;
    display: none;
}

.water-radius-highlight {
    position: absolute;
    border: 0.3vh dashed rgba(58, 92, 166, 0.9);
    background: rgba(58, 92, 166, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1055;
    display: none;
    transform: translate(-50%, 50%);
}

.particle {
    position: absolute;
    background: #e0f7fa;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1600;
    transform: translate(-50%, 50%);
}

/* Aim arrow */

.aim-line {
    position: absolute;
    transform-origin: left center;
    height: 0.5vh;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.25vh;
    pointer-events: none;
    z-index: 1700;
}

.aim-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1vh solid rgba(255, 255, 255, 0.9);
    border-top: 0.6vh solid transparent;
    border-bottom: 0.6vh solid transparent;
}

/* UI */

#ui-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
}

#velocity-display {
    position: absolute;
    top: 1vh;
    left: 1vh;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1vh;
    border-radius: 0.5vh;
    font-size: 2vh;
    display: none;
    pointer-events: none;
    white-space: pre-line;
}

.corner-panel {
    position: absolute;
    left: 1vh;
    bottom: 1vh;
    display: flex;
    gap: 0.5vh;
    padding: 0.5vh;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0.75vh;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.corner-panel.right-panel {
    left: auto;
    right: 1vh;
    bottom: auto;
    top: 1vh;
    flex-direction: column;
    color: white;
    font-size: 1.5vh;
    width: 20vh;
}

.corner-panel.bottom-right-panel {
    left: auto;
    right: 1vh;
    bottom: 1vh;
    flex-direction: column;
    color: white;
    font-size: 1.3vh;
    padding: 1vh;
}

.help-title {
    font-weight: bold;
    font-size: 1.5vh;
    margin-bottom: 0.5vh;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 0.3vh;
}

.help-line {
    display: flex;
    gap: 0.5vh;
    margin: 0.2vh 0;
}

.help-line kbd {
    background: rgba(255,255,255,0.15);
    padding: 0.1vh 0.4vh;
    border-radius: 0.3vh;
    font-size: 1.1vh;
    white-space: nowrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.2vh;
}

.control-group label {
    display: flex;
    justify-content: space-between;
}

.control-group input, .control-group select {
    width: 100%;
    font-size: 1.2vh;
}

.ui-button {
    border: none;
    padding: 0.4vh;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 0.5vh;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
}

.ui-button img {
    width: 4vh;
    height: 4vh;
    object-fit: cover;
}

.button-label {
    color: white;
    font-size: 1vh;
    margin-top: 0.2vh;
    text-align: center;
    max-width: 6vh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-button.selected {
    outline: 0.3vh solid #ffe36e;
    box-shadow: 0 0 1vh rgba(255, 227, 110, 0.8);
}

#pause-button {
    color: white;
    font-size: 2vh;
    width: 4vh;
    height: 4vh;
}

#hotbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1vh;
    display: flex;
    gap: 0.6vh;
    padding: 0.6vh 0.8vh;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 1vh;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.item-button img {
    width: 5vh;
    height: 5vh;
}

.item-button .button-label {
    max-width: 8vh;
    font-size: 1vh;
}