/* Luanti touch overlay — Minecraft-style controls
 *
 * Layout philosophy:
 *   - Always visible: a small "utility cluster" with PLAY/HIDE toggle, keyboard,
 *     and fullscreen buttons. These don't block menu interaction because they
 *     occupy a tiny corner of the screen.
 *   - Hidden by default and only shown when user toggles "PLAY": the joystick,
 *     action buttons, hotbar, look-drag area. These blanket the screen so they
 *     would block menu navigation if left visible.
 *   - !important throughout because the React app uses Tailwind's preflight
 *     reset (`*` selectors) and we need predictable specificity wins.
 */

#luanti-touch-root {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2147483600 !important;
  font-family: system-ui, sans-serif !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#luanti-touch-root *,
#luanti-touch-root *::before,
#luanti-touch-root *::after {
  box-sizing: border-box !important;
  pointer-events: auto !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Minecraft-style button */
#luanti-touch-root .lt-btn {
  background: linear-gradient(to bottom, #8b8b8b 0%, #6b6b6b 50%, #5a5a5a 100%) !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 #3f3f3f !important;
  border: 2px solid #1e1e1e !important;
  border-top-color: #c6c6c6 !important;
  border-left-color: #c6c6c6 !important;
  border-right-color: #373737 !important;
  border-bottom-color: #373737 !important;
  font-weight: bold !important;
  font-size: 13px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: absolute !important;
  opacity: 0.9 !important;
  visibility: visible !important;
}

#luanti-touch-root .lt-btn.lt-pressed,
#luanti-touch-root .lt-btn:active {
  background: linear-gradient(to bottom, #6b6b6b 0%, #555 50%, #4a4a4a 100%) !important;
  border-top-color: #373737 !important;
  border-left-color: #373737 !important;
  border-right-color: #c6c6c6 !important;
  border-bottom-color: #c6c6c6 !important;
  transform: translateY(1px) !important;
}

/* ----- always-visible utility cluster (top-left) ----- */
#luanti-touch-root .lt-util {
  width: 56px !important;
  height: 40px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}
#luanti-touch-root #lt-toggle  { top: 8px;   left: 8px;   }
#luanti-touch-root #lt-keyb    { top: 8px;   left: 72px;  }
#luanti-touch-root #lt-full    { top: 8px;   left: 136px; }

#luanti-touch-root #lt-toggle.lt-on {
  background: linear-gradient(to bottom, #6dd17b 0%, #3a9b4a 50%, #2c7e3b 100%) !important;
  color: #fff !important;
}

/* Hidden input used to surface the iOS keyboard. Off-screen but focusable. */
#lt-keyb-input {
  position: fixed !important;
  left: -1000px !important;
  top: -1000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 16px !important;  /* prevents iOS auto-zoom on focus */
}

/* ----- gameplay controls (only shown when overlay enabled) ----- */
#luanti-touch-root .lt-gameplay {
  display: none !important;
}
#luanti-touch-root.lt-on .lt-gameplay {
  display: flex !important;
}
#luanti-touch-root.lt-on #lt-look {
  display: block !important;
}

#luanti-touch-root #lt-look {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
  display: none !important;
  /* Sit BEHIND all the buttons so taps on them don't hit the look layer */
  z-index: 0 !important;
}

#luanti-touch-root #lt-joy-base {
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  background: rgba(30, 30, 30, 0.45) !important;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
  touch-action: none !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
#luanti-touch-root #lt-joy-stick {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 60px !important;
  height: 60px !important;
  margin-left: -30px !important;
  margin-top: -30px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, #c6c6c6 0%, #8b8b8b 60%, #5a5a5a 100%) !important;
  border: 2px solid #1e1e1e !important;
  pointer-events: none !important;
  transition: transform 0.04s linear !important;
}

#luanti-touch-root .lt-action {
  width: 68px !important;
  height: 68px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  z-index: 1 !important;
}
#luanti-touch-root #lt-jump   { right: 24px !important;  bottom: 102px !important; }
#luanti-touch-root #lt-sneak  { right: 102px !important; bottom: 24px !important;  }
#luanti-touch-root #lt-place  { right: 180px !important; bottom: 102px !important; }
#luanti-touch-root #lt-dig    { right: 24px !important;  bottom: 180px !important; }

#luanti-touch-root .lt-top {
  width: 52px !important;
  height: 40px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  z-index: 1 !important;
}
#luanti-touch-root #lt-inv  { top: 8px !important; right: 8px !important;  }
#luanti-touch-root #lt-chat { top: 8px !important; right: 68px !important; }
#luanti-touch-root #lt-esc  { top: 8px !important; right: 128px !important; }

#luanti-touch-root #lt-hotbar {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: none !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 2px solid #1e1e1e !important;
  border-radius: 4px !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
#luanti-touch-root.lt-on #lt-hotbar { display: flex !important; }

#luanti-touch-root .lt-slot {
  width: 40px !important;
  height: 40px !important;
  position: relative !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  opacity: 0.95 !important;
}

/* Phone in portrait — shrink everything */
@media (max-width: 500px) and (orientation: portrait) {
  #luanti-touch-root #lt-joy-base { width: 120px !important; height: 120px !important; left: 12px !important; bottom: 12px !important; }
  #luanti-touch-root #lt-joy-stick { width: 48px !important; height: 48px !important; margin-left: -24px !important; margin-top: -24px !important; }
  #luanti-touch-root .lt-action { width: 56px !important; height: 56px !important; }
  #luanti-touch-root #lt-jump   { right: 12px !important;  bottom: 76px !important;  }
  #luanti-touch-root #lt-sneak  { right: 76px !important;  bottom: 12px !important;  }
  #luanti-touch-root #lt-place  { right: 140px !important; bottom: 76px !important;  }
  #luanti-touch-root #lt-dig    { right: 12px !important;  bottom: 140px !important; }
  #luanti-touch-root .lt-slot   { width: 32px !important; height: 32px !important; font-size: 12px !important; }
}