/* BlockWorld v1.5 UI styles */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#7db5e8;font-family:system-ui,-apple-system,sans-serif;touch-action:none;user-select:none;color:#fff}
#game{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:fixed;inset:0;pointer-events:none}
#top{position:absolute;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.panel{background:#111d2be0;border:1px solid #ffffff40;border-radius:9px;padding:7px 9px;font-size:11px;line-height:1.5;backdrop-filter:blur(5px);text-shadow:0 1px 2px #000}
#survivalHUD{display:flex;flex-direction:column;gap:2px;margin-top:3px;min-width:150px}
.statusRow{display:flex;gap:2px;min-height:15px;align-items:center;white-space:nowrap}
.statusIcon{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;flex:0 0 15px}.statusIcon svg{display:block;width:15px;height:14px;shape-rendering:crispEdges;image-rendering:pixelated}.statusIcon .iconShadow{fill:#311d1d;transform:translate(1px,1px)}.statusIcon .iconOutline{fill:none;stroke:#4a2525;stroke-width:1.5;stroke-linejoin:miter}.statusIcon .iconFill{filter:drop-shadow(0 0 0 #000)}.statusIcon.foodIcon .iconOutline{stroke:#51351d}.statusIcon.empty svg{filter:grayscale(1);opacity:.35}.statusIcon.half svg{opacity:.9}

#buttons{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:66%;pointer-events:auto}
button{font:600 12px system-ui;background:#253748eF;color:white;border:1px solid #ffffff60;border-radius:8px;padding:8px 9px;min-height:35px;touch-action:manipulation}
button:active,button.active{background:#337e4d}
#cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px}
#cross:before,#cross:after{content:"";position:absolute;background:#fff;box-shadow:0 0 2px #000}
#cross:before{width:2px;height:16px;left:7px}#cross:after{height:2px;width:16px;top:7px}
#tip{position:absolute;top:76px;left:50%;transform:translateX(-50%);background:#101a27c9;border-radius:8px;padding:7px 10px;font-size:11px;white-space:nowrap;max-width:92vw;text-align:center}
#bottom{position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
#joystick{pointer-events:auto;width:142px;height:142px;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
#stickBase{width:128px;height:128px;border-radius:50%;border:2px solid #ffffff80;background:radial-gradient(circle at 35% 28%,#ffffff38,#152738b8 70%);box-shadow:inset 0 2px 10px #0006,0 2px 8px #0004;position:relative;touch-action:none}
#stickBase:before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#ffffff55;transform:translate(-50%,-50%)}
#stickThumb{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #ffffffa8;background:linear-gradient(145deg,#aab9c9ed,#42576bdc);box-shadow:0 3px 8px #0008;pointer-events:none}
#joystick.engaged #stickThumb{background:linear-gradient(145deg,#d0dce7f5,#58758edc);border-color:#fff}
#rightControls{pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:min(60vw,300px)}.action{min-width:64px;min-height:48px;padding:7px;font-size:13px}#sprint.active{background:#b77920;border-color:#ffe19a;box-shadow:0 0 0 2px #f9d66c55}
#hotbar{display:flex;gap:3px;padding:4px;background:#101820bd;border:1px solid #ffffff40;border-radius:9px;max-width:min(72vw,620px);overflow-x:auto;scrollbar-width:none}
.slot{min-width:48px;width:48px;height:51px;padding:3px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-size:10px;position:relative;border-radius:5px}.slot .num{position:absolute;top:1px;left:4px;font-size:9px;color:#fff;text-shadow:0 1px 2px #000}.slot .swatch{width:19px;height:19px}
.swatch{width:16px;height:16px;border:1px solid #ffffffa0;border-radius:2px}.selected{outline:2px solid #ffe66d;background:#65572ee8}
#toast{position:absolute;left:50%;bottom:135px;transform:translateX(-50%);background:#111e;padding:7px 10px;border-radius:8px;font-size:12px;opacity:0;transition:opacity .15s}
#overlay{position:fixed;inset:0;z-index:4;background:#0c182966;display:flex;align-items:center;justify-content:center;padding:18px}
#card{width:min(440px,100%);background:#111d2bf5;border:1px solid #ffffff45;border-radius:15px;padding:19px;box-shadow:0 12px 40px #0006}
#card h1{margin:0 0 7px;font-size:25px}#card p{font-size:13px;line-height:1.6;color:#dce8f2}
#start{width:100%;background:#287a4d;min-height:44px;font-size:15px}.small{font-size:11px!important;color:#adbfce!important}
@media(min-width:700px){#joystick{width:158px;height:158px}#stickBase{width:142px;height:142px}.slot{min-width:54px;width:54px;height:56px}}
@media(max-width:600px){#survivalHUD{min-width:130px}.statusIcon{width:14px;height:14px;flex-basis:14px}.statusIcon svg{width:14px;height:13px}#top .panel{font-size:10px;padding:6px 7px}#buttons button{padding:7px 8px;min-height:36px}#bottom{gap:4px}#joystick{width:120px;height:120px}#stickBase{width:108px;height:108px}#stickThumb{width:48px;height:48px}#hotbar{max-width:68vw}.action{min-width:54px;font-size:11px;padding:5px;min-height:42px}#actions{max-width:58vw}}