html,body{width:100%;height:100%;margin:0;overflow:hidden}#app{width:100%;height:100%;display:block}#hotbar{z-index:10;background:linear-gradient(#4c3623eb,#211914f0),repeating-linear-gradient(90deg,#ffeea514 0 2px,#0000 2px 8px);border:3px solid #241a13;border-radius:8px;grid-auto-flow:column;gap:10px;padding:10px;display:grid;position:fixed;bottom:clamp(14px,3vh,28px);left:50%;transform:translate(-50%);box-shadow:0 5px #120c088c,0 18px 32px #00000057,inset 0 2px #ffeea547}.hotbar-slot{appearance:none;color:#2f2118;cursor:default;width:clamp(52px,8vw,64px);height:clamp(52px,8vw,64px);image-rendering:pixelated;background:linear-gradient(#ffe18d 0%,#e7aa48 62%,#bc752d 100%);border:0;border-radius:6px;transition:transform .12s,box-shadow .12s,filter .12s;position:relative;box-shadow:inset 0 0 0 2px #fff0b8,inset 0 -7px #7c471f61,0 4px #4e321f,0 10px 18px #0000004d}.hotbar-slot:after{content:"";pointer-events:none;border:2px solid #58351961;border-radius:4px;position:absolute;inset:6px}.hotbar-slot:hover,.hotbar-slot:focus-visible{filter:brightness(1.07)}.hotbar-slot:focus-visible{outline-offset:4px;outline:3px solid #65dcff}.slot-key{z-index:1;color:#ffe8a6;background:#2d2118;border:2px solid #5c3823;border-radius:4px;place-items:center;width:18px;height:18px;font:800 12px/1 Courier New,monospace;display:grid;position:absolute;top:5px;left:6px;box-shadow:0 2px #00000047}.slot-icon{display:block;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%)}.slot-icon:before,.slot-icon:after{content:"";display:block;position:absolute}.hotbar-slot[data-item=hand] .slot-icon{background:#9d6340;border:3px solid #55321f;border-radius:7px 7px 5px 5px;width:22px;height:24px;box-shadow:inset -4px -4px #4827183d}.hotbar-slot[data-item=hand] .slot-icon:before{background:#a86d49;border:3px solid #55321f;border-bottom:0;border-radius:5px 5px 0 0;width:7px;height:13px;top:-8px;left:-3px;box-shadow:8px 0 #a86d49,8px -3px #55321f,16px 0 #a86d49,16px -3px #55321f}.hotbar-slot[data-item=pickaxe] .slot-icon{background:#7a4b2d;border:2px solid #4a2d1d;border-radius:3px;width:8px;height:38px;transform:translate(-50%,-45%)rotate(-32deg)}.hotbar-slot[data-item=pickaxe] .slot-icon:before{background:linear-gradient(90deg,#d8e9f0,#7f95a1 70%);border:2px solid #263645;border-radius:5px 5px 3px 3px;width:39px;height:8px;top:-5px;left:-16px}.hotbar-slot[data-item=hatchet] .slot-icon{background:#81502f;border:2px solid #4a2d1d;border-radius:3px;width:8px;height:37px;transform:translate(-50%,-45%)rotate(18deg)}.hotbar-slot[data-item=hatchet] .slot-icon:before{background:linear-gradient(135deg,#e7f4f5,#78919c 76%);border:2px solid #263645;border-left:0;border-radius:2px 12px 12px 2px;width:24px;height:18px;top:-5px;right:-19px}.hotbar-slot[data-item=empty] .slot-icon{opacity:.62;border:3px dashed #492d1b80;border-radius:5px;width:26px;height:26px}.hotbar-slot.selected{background:linear-gradient(#fff4b4 0%,#ffc65b 58%,#d88a32 100%);transform:translateY(-7px);box-shadow:0 0 0 3px #fff4c7,0 0 0 6px #30d8ff,0 6px #4e321f,0 16px 26px #00000061,inset 0 0 0 2px #fff7d0,inset 0 -7px #9a521c4d}.hotbar-slot.selected:after{border-color:#5835198c}@media (width<=520px){#hotbar{gap:7px;padding:8px}.hotbar-slot{width:50px;height:50px}}