html,body{margin:0;padding:0;overflow:hidden;height:100%;background:#000}canvas{display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair .ch-h,#crosshair .ch-v{position:absolute;background:#fff;mix-blend-mode:difference}#crosshair .ch-h{width:20px;height:2px;top:-1px;left:-10px}#crosshair .ch-v{width:2px;height:20px;top:-10px;left:-1px}#hotbar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:4px}.hotbar-slot{width:48px;height:48px;border:2px solid rgba(255,255,255,.4);background:#00000073;box-sizing:border-box}.hotbar-slot.selected{border-color:#fff;background:#ffffff26}#fps,#blockinfo{position:absolute;left:8px;font-family:monospace;font-size:14px;color:#fff;background:#0006;padding:4px 8px;border-radius:4px;pointer-events:none}#fps{top:8px}#blockinfo{top:32px}#loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2e;font-family:sans-serif;color:#fff;transition:opacity .6s ease}#loading-screen h1{margin:0 0 24px;font-size:2rem;letter-spacing:2px}.loading-bar-track{width:300px;height:16px;border:2px solid #444;border-radius:8px;overflow:hidden;background:#0a0a15}#loading-bar-fill{width:0%;height:100%;background:#4caf50;transition:width .3s ease}#loading-status{margin:12px 0 24px;font-size:.9rem;color:#aaa}.control-mappings{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.control-mappings li{font-size:.85rem;color:#888}.control-mappings kbd{display:inline-block;padding:1px 6px;background:#333;border-radius:3px;font-family:monospace;font-size:.8rem;color:#ddd}#loading-screen.fade-out{opacity:0;pointer-events:none}