/* ===== WORLD OF BLOCKS 4 — мобильный UI ===== */
html.mobile, html.mobile body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }

/* скрыть десктопные подсказки (мышь/клавиатура) — на тач не нужны */
html.mobile #lockHint, html.mobile #tabList, html.mobile #touchWarn { display: none !important; }
html.mobile #hint { bottom: auto; top: 64px; font-size: 13px; opacity: .9; pointer-events: none; }

#touchUI { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
#touchUI.playing { display: block; }
#touchUI button { pointer-events: auto; -webkit-tap-highlight-color: transparent; }

/* Джойстик движения (левая зона) */
#tJoy { position: fixed; inset: 0; pointer-events: none; display: none; }
#touchUI.playing #tJoy { display: block; }
#tJoy.on #tJoyBase { display: block; }
#tJoyBase { position: fixed; display: none; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.22); }
#tJoyKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(255,255,255,.32); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 4px 12px rgba(0,0,0,.4); }

/* Основные действия — правый низ (над хотбаром) */
#tMain { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 64px);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
/* Контекстные — правый верх (ниже заголовка #wm) */
#tCtx { position: fixed; right: 14px; top: calc(env(safe-area-inset-top) + 34px);
  display: flex; flex-direction: column; align-items: center; gap: 9px; }
html.mobile #wm { font-size: 10px; opacity: .4; }

.tbtn { border-radius: 50%; border: 2px solid rgba(255,255,255,.32); background: rgba(20,28,40,.5);
  backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: transform .07s, background .15s; }
.tbtn.dig, .tbtn.place, .tbtn.jump, .tbtn.horn { width: 66px; height: 66px; font-size: 28px; }
.tbtn.sm { width: 46px; height: 46px; font-size: 21px; border-width: 1.5px; }
.tbtn.press { transform: scale(.88); background: rgba(90,200,120,.5); }
.tbtn.dig { background: rgba(210,140,40,.5); }
.tbtn.place { background: rgba(60,140,220,.5); }
.tbtn.horn { background: rgba(220,180,40,.5); }
.tbtn.car.exit { background: rgba(210,80,80,.55); }
.tbtn.sm.on { background: rgba(90,200,120,.6); border-color: #6fe09a; }

/* Игровой хотбар — делаем тачабельным и приподнимаем */
html.mobile #hotbar { pointer-events: auto; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 61; }
html.mobile #hotbar .slot { cursor: pointer; }
html.mobile #hearts, html.mobile #food, html.mobile #air { z-index: 61; }

/* FIX: окно создания мира / оверлеи поверх главного меню (menuUI z-index:50) */
html.mobile .uiOverlay { z-index: 200 !important; background: rgba(8,10,16,.94) !important;
  align-items: flex-start !important; overflow-y: auto !important; padding: 12px 0; }
html.mobile .uiOverlay > * { margin: auto; max-width: 96vw; }