/* Basic reset */
body {
    font-family: Arial, sans-serif;
    user-select: none;
}

canvas {
    display: block;
}

#hotbar {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0px;
    background: url('assets/toolbar.png') no-repeat bottom center;
    background-size: 364px 44px;
    width: 364px;
    height: 44px;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px;
}

.slot {
    width: 32px;
    height: 32px;
    margin: 0 4px;
    /* Spacing for toolbar image slots (aprox) */
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    /* Show block icon inside */
}

.slot.active {
    border: 2px solid white;
    border-radius: 2px;
    box-shadow: 0 0 2px black;
}

/* Icons for slots using Atlas */
.slot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/atlas.png');
    background-size: 1600% 1600%;
    /* 16x16 grid */
    image-rendering: pixelated;
}

.slot[data-type="1"]::after {
    background-position: -200% 0;
}

/* Dirt (index 2) -> 2*100% = 200% */
/* CSS background-position logic for sprites: -x * width */
/* 32px size... simpler to use percentages. 1 slot = 100%/15? 
   No, background-size is 1600%. 1 unit is 100%. 
   pos = x * 100% ? No.
   Let's use exact calc if easier or trial. 
   If bg-size = 1600%, then the image is 16x bigger than the element.
   To show index N, we shift by N * 100%. 
*/
.slot[data-type="1"]::after {
    background-position: -200% 0;
}

/* Dirt (2) */
.slot[data-type="2"]::after {
    background-position: -300% 0;
}

/* Grass Side (3) */
.slot[data-type="3"]::after {
    background-position: -100% 0;
}

/* Stone (1) */
.slot[data-type="4"]::after {
    background-position: -400% 0;
}

/* Wood (4) */
.slot[data-type="5"]::after {
    background-position: -700% 0;
}

/* Brick (7) */