/* BlockCraft – minimal custom styles (Tailwind handles the rest) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

#game-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    display: block;
}

/* ── Hotbar ─────────────────────────────────────────────────────── */
.hotbar-slot {
    width: 52px; height: 52px;
    border: 2px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    position: relative; border-radius: 4px;
    transition: border-color .1s, background .1s;
}
.hotbar-slot.selected {
    border-color: #fff;
    background: rgba(255,255,255,.15);
    box-shadow: 0 0 8px rgba(255,255,255,.3);
}
.hotbar-slot .count {
    position: absolute; bottom: 1px; right: 3px;
    color: #fff; font-size: 11px; font-weight: 700;
    text-shadow: 1px 1px 2px #000;
}
.hotbar-slot .slot-num {
    position: absolute; top: 1px; left: 3px;
    color: rgba(255,255,255,.35); font-size: 9px;
}

/* ── Inventory slots ────────────────────────────────────────────── */
.inv-slot {
    width: 48px; height: 48px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
    border-radius: 4px; transition: all .1s;
}
.inv-slot:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
}
.inv-slot .count {
    position: absolute; bottom: 1px; right: 3px;
    color: #fff; font-size: 10px; font-weight: 700;
    text-shadow: 1px 1px 2px #000;
}

/* ── Block preview swatch ───────────────────────────────────────── */
.block-preview {
    width: 32px; height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.3);
}

/* ── Tool durability bar ────────────────────────────────────────── */
.dur-bar {
    position: absolute; bottom: 2px; left: 2px;
    height: 3px; background: #4f4; border-radius: 1px;
    max-width: calc(100% - 4px);
}

/* ── Isometric block preview ── */
.block-preview {
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.25), inset -1px -1px 0 rgba(0,0,0,.3);
}
.tool-prev {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.35);
}
.tool-sym {
    font-size: 18px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.6));
    line-height: 1;
}

/* ── Food preview ── */
.food-prev {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(200,120,60,.5);
}
.food-sym {
    font-size: 16px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
    line-height: 1;
}

/* ── Floating entity name labels ── */
#entity-labels {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden; z-index: 5;
}
.entity-label {
    position: absolute; transform: translate(-50%, -100%);
    font-size: 11px; font-weight: 700;
    text-shadow: 0 0 4px #000, 0 0 2px #000;
    white-space: nowrap; padding: 1px 5px;
    background: rgba(0,0,0,.35); border-radius: 3px;
    pointer-events: none;
}
.entity-label .hp-bar {
    display: inline-block; height: 4px; border-radius: 2px;
    margin-left: 4px; vertical-align: middle;
}